解决layui隐藏域:不显示问题(含案例、代码、截图)

layui 隐藏域:不显示问题(案例篇)

  • 自定义的隐藏域不显示?
  • 只需要给隐藏域添加一个layui-input类名即可,其他不用改变。

案例 · 效果图:

解决layui隐藏域:不显示问题(含案例、代码、截图)_第1张图片


代码示下:

DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>时间选择器-排版演示title>
  <link rel="stylesheet" href="statics/plugin/layui/css/layui.css">
  <link rel="stylesheet" href="statics/css/common.css">
  <link rel="stylesheet" href="statics/css/member.css">
  <style>
    
  style>
head>
<body>


<div class="layui-container mgt20">
<p class="layui-font-red">form表单内部需要增加input隐藏域,用于接收按钮下拉组件传值。p>
<form class="layui-form" action="">
  
  <div class="site-border-green">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend class="layui-font-green">时间选择器:范围选择legend>
    fieldset>
  div>
  
   
  <div class="layui-form">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">订单时间label>
        <div class="layui-inline" id="test6">
          <div class="layui-input-inline">
            <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期" name="startdate">
          div>
          <div class="layui-form-mid">div>
          <div class="layui-input-inline">
            <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期" name="enddate" >
          div>
        div>
      div>
    div>
  div>


  
  <div class="site-border-green">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend class="layui-font-green">下拉菜单legend>
    fieldset>
  div>
  <div class="layui-btn-container">
    <button class="layui-btn demo1">
      <span>请选择消费类型span>
      <i class="layui-icon layui-icon-down layui-font-12">i>
    button>
    <button class="layui-btn layui-btn-primary demo1">
      <span>下拉菜单span>
      <i class="layui-icon layui-icon-down layui-font-12">i>
    button>
    <button class="layui-btn layui-btn-primary demo1">
      下拉菜单
      <i class="layui-icon layui-icon-down layui-font-12">i>
    button>    
    <style>
      .blackbgclr-dropdown,
      .blackbgclr-dropdown .layui-menu{background-color: #000; border: none;}
      .blackbgclr-dropdown .layui-menu li{color: #fff;}
      .blackbgclr-dropdown .layui-menu li:hover{background-color: #333;}
    style>
  div>
   
  <div class="layui-inline" style="width: 235px;">
    <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="demo2">
  div>



    
  <input type="hidden" id="type" name="type"  placeholder="消费类型" class="layui-input">
  
  <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">开始查询button>
  <button type="reset" class="layui-btn layui-btn-primary">重置button>


form>

div>

 
<script src="statics/plugin/layui/layui.js">script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');

  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
});
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //日期范围
  laydate.render({
    elem: '#test6'
    //设置开始日期、日期日期的 input 选择器
    //数组格式为 2.6.6 开始新增,之前版本直接配置 true 或任意分割字符即可
    ,range: ['#test-startDate-1', '#test-endDate-1']
  });
});
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
  var dropdown = layui.dropdown
  ,util = layui.util
  ,layer = layui.layer
  ,table = layui.table
  ,$ = layui.jquery;
  
  //初演示
  dropdown.render({
    elem: '.demo1'
    ,trigger: 'hover'//鼠标hover下拉菜单展开
    ,data: [{
      title: '金钱'
      ,id: 100
    },{
      title: '积分'
      ,id: 101
    },{
      title: '金钱+积分'
      ,id: 102
    }]
    ,className: 'blackbgclr-dropdown'//设置类名,绑定下拉菜单的背景等css样式设置
    ,click: function(obj){
      this.elem.find('span').html(obj.title);//this.elem拼接使用原生js语法及其函数find()并操作子元素或文字等属性的取值
      $('#type').val(obj.title);
      layer.tips('点击了:'+ obj.title, this.elem, {tips: [1, '#5FB878']})
    }
  });
  
  //初演示 - 绑定输入框
  dropdown.render({
    elem: '#demo2'
    ,style: 'width: 235px;'//设置DOM元素尺寸:width宽度
    ,data: [{
      title: '科幻'
      ,id: 101
    },{
      title: '喜剧'
      ,id: 102
    },{
      title: '综艺'
      ,id: 103
    },{
      title: '动画'
      ,id: 104
    },{
      title: '悬疑'
      ,id: 105
    },{
      title: '惊悚'
      ,id: 106
    }]
    ,click: function(obj){
      this.elem.val(obj.title);
    }
  });
  
 
  
  
  
});
script> 
body>
html>

重要代码提示:

    
  <input type="hidden" id="type" name="type"  placeholder="消费类型" class="layui-input">

以上就是关于“ layui 隐藏域:不显示问题(案例篇) ”的全部内容。

你可能感兴趣的:(Layui,踩坑篇)