layUI学习之路

layUI学习之路

1. 表单

layui.use('form', function(){
  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
  
  //……
  
  //但是，如果你的HTML是动态生成的，自动渲染就会失效
  //因此你需要在相应的地方，执行下述方法来进行渲染
  form.render();
});      

<form class="layui-form layui-form-pane" action="">
	<table class="form-table">
		<tr>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label">单据编号</label>
                    <div class="layui-input-block">
                        <input type="text" value="保存后自动生成" name="code" id="code" readonly="readonly"
                               autocomplete="off" class="layui-input layui-bg-gray when-view-readonly"/>
                    </div>
                </div>
            </td>
        </tr>
	</table>
</form>

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通用CSS类
when-view-readonly：view时只读

<i onclick="selectDepart2();" class="layui-icon layui-icon-search when-view-hidden"
     style="position: absolute;top: 5px;right: 10px;font-size: 20px;cursor: pointer;"></i>

<div class="layui-card">
   <div class="layui-card-body" style="padding-top: 0;padding-left: 0;padding-right: 0;">
       <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="border-top: 1px solid #e6e6e6;">
           <ul class="layui-tab-title">
               <li class="layui-this">项目信息</li>
               <li class="repair-pay">项目概算</li>
               <li id="repair-upload">附件上传</li>
               <li id="repair-audit">审批意见</li>
               <li id="repair-edit">修改意见</li>
           </ul>
           <div class="layui-tab-content" style="height: 400px;">
               <div class="layui-tab-item layui-show">
                   <div class="list"
                        style="display: flex;flex-direction: row;position: relative;width: 100%">
                       <div class="let"
                            style="width: 160px;background: rgb(234,234,234);display: flex;flex-direction: row;justify-content: center;align-items: center;border: 1px solid #e6e6e6;">
                           项目立项依据
                       </div>
                       <div class="right" style="flex:1;width: 100%;box-sizing: border-box">
                           <textarea name="projectFeasibility" id="projectFeasibility" placeholder="请输入内容" class="layui-textarea" required
                                autocomplete="off" class="layui-input layui-bg-gray when-view-readonly"></textarea>
                       </div>
                   </div>
               </div>
        </div>
</div>

//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});

通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

组装行内表格

    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
  </div>

2. 折叠面板

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
 
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

lay-accordion 开启手风琴