Layui的学习

基础说明

当你需要使用layui的一些特效或许功能的时候，基本都是需要加载相应的模块的

---

加载方法有两种：

①加载外部模块

<script>
layui.config({
  base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口
/**
  项目JS主入口
  以依赖layui的layer和form模块为例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer
  ,form = layui.form;

  layer.msg('Hello World');

  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});
</script>    

②一次性加载所有模块

<script src="../layui/layui.all.js"></script>  
<script>
;!function(){
  //无需再执行layui.use()方法加载模块，直接使用即可
  var form = layui.form
  ,layer = layui.layer;

  //…
}();
</script> 

---

页面元素

布局

1.1 栅格系统
核心：将一个容器分成12等分，根据不同的屏幕大小，将内容以不同的比例进行显示
行：<div class="layui-row"></div>
每行中的列数：<div class="layui-col-md*"></div>
屏幕类型： xs、sm、md、lg
列间的间距：layui-col-space5
列间的偏移：layui-col-md-offset*

例子：

<div class="layui-container">//定义一个容器
  <div class="layui-row  layui-col-space10"> //容器中的一行，每列的间距为10
       <div class="layui-col-md4"> //对于中型屏幕宽度为4
            内容 //该列中显示的内容
       </div>
       <div class="layui-col-md4 layui-col-md-offset4"> //在中型屏幕下，这个内容会偏移4个单位
            1/3
       </div>
       <div class="layui-col-md4">
            1/3
       </div>
  </div>
</div>  

1.2 后台布局

在官网中有完整的代码，这里就不复制粘贴了。
后台布局代码

颜色

颜色种类：颜色种类

背景色：class="layui-bg-red"

图标(icon)

添加图标：<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

动画(animation)

添加动画：<div class="layui-anim layui-anim-up"></div>

循环动画，追加：`layui-anim-loop

` >按钮(button) 1,建立基本的按钮 向任意HTML元素设定class=”layui-btn”，建立一个基础按钮。 通过追加格式为layui-btn-{type}的class来定义其它按钮风格 按钮用法：`一个可跳转的按钮 ` 2，建立图标按钮 图标按钮用法：` ဂ ` 在按钮里面包含一个图标 3,按钮组 按钮组的用法：`

增加 编辑 删除

` >表单(form)：依赖模块form > 1，输入框 用法：` ` 其中 required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 class=”layui-input”：layui.css提供的通用CSS类 2，下拉框 下拉框用法：

<select name="city" lay-verify="">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>     

其中：
属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持

3，复选框

用法：

<input type="checkbox" name="" title="写作" lay-skin="primary" checked>

其中：
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value=”1”可自定义值，否则选中时返回的就是默认的on

4，开关

用法：
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

其中：
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value=”1”可自定义值，否则选中时返回的就是默认的on

5，单选框

用法：

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

其中：
属性title可自定义文本
属性disabled开启禁用
设置value=”xxx”可自定义值，否则选中时返回的就是默认的on

6，文本域

文本域用法：
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

7,组装行内表单

用法：

<div class="layui-form-item">

  <div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <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>

  <div class="layui-inline">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
    </div>
  </div>

</div>

其中：
class=”layui-inline”：定义外层行内
class=”layui-input-inline”：定义内层行内

导航(navigate)：依赖element模块

1,水平导航

用法：

 <ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;

  //…
});
</script>

其中：

layui-this来指向当前页面分类

2，在导航中添加修改其他内容

2.1 在导航中添加图片、徽章

 <ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>

2.2 修改导航栏的主题颜色（设置背景颜色）

 <ul class="layui-nav layui-bg-green" lay-filter="">
  …
</ul> 

其中：
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

3，垂直/侧边导航

垂直/侧边导航栏与水平导航栏结构一样，不同的是：
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

4,面包屑

用法：

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

其中：
lay-separator=”-” 来自定义分隔符

选项卡(tab)：依赖element模块

1，常规选项卡

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

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

  //…
});
</script>

其中：
设成卡片分格：追加class：layui-tab-card
允许Tab选项卡被删除：追加class：lay-allowClose="true"

2，ID焦点定位

对选项卡设置属性 lay-id=”xxx” 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。

进度条(progress)：依赖element模块

进度条用法：

<div class="layui-progress" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>

<div class="layui-progress" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>

<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

面板：依赖element模块

1，卡片面板

用法：

 <div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
    卡片式面板面板通常用于非白色背景色的主体内<br>
    从而映衬出边框投影
  </div>
</div>

2，折叠面板：依赖element模块

折叠面板用法：

<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>

其中：
设置class为 layui-show 来选择性初始展开某一个面板

3，开启手风琴

与折叠面板的差别不大，但是需要增加属性：lay-accordion。作用就是每次打开都只有一个页面。

用法：<div class="layui-collapse" lay-accordion></div>

表格

1，用法

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

其中：
开启隔行背景：class=“lay-even”
切换边框分格：class=“lay-skin=”属性值””
修改表格尺寸：class=“lay-size=”属性值””

徽章(badge)

徽章用法：

 <div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理<span class="layui-badge-dot"></span></li>
    <li>最新邮件<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>

其中：
边框的类型：

 <span class="layui-badge-dot layui-bg-orange"></span>
 <span class="layui-badge layui-bg-cyan">青</span>
 <span class="layui-badge-rim">6</span>

时间线

用法：

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>

辅助功能

1，引用区块

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

2，字段集区块

<fieldset class="layui-elem-field">
  <legend>字段集区块 - 默认风格</legend>
  <div class="layui-field-box">
    内容区域
  </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
  <legend>字段集区块 - 横线风格</legend>
  <div class="layui-field-box">
    内容区域
  </div>
</fieldset>

3，有颜色的横线

用法：

赤色分割线
<hr class="layui-bg-red">
橙色分割线
<hr class="layui-bg-orange">
墨绿分割线
<hr class="layui-bg-green">

内置模块

弹出层(layui下的layer)：依赖layer模块

1，加载layer模块

①作为独立组件使用，如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。通过script标签引入layer.js后，直接用即可

②layui 模块化使用，如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js，通过layui.use(‘layer’, callback)加载模块

2，基本参数（参数太多，这里仅摘抄部分参数）

①type - 基本层类型，类型：Number，默认：0
②title - 标题，类型：String/Array/Boolean，默认：'信息'
③content - 内容，类型：String/DOM/Array，默认：''
④skin - 样式类名，类型：String，默认：''
⑤area - 宽高，类型：String/Array，默认：'auto'
⑥offset - 坐标，类型：String/Array，默认：垂直水平居中
⑦icon - 图标。信息框和加载层的私有参数，类型：Number，默认：-1（信息框）/0（加载层）
⑧btn - 按钮，类型：String/Array，默认：'确认'
⑨btnAlign - 按钮排列，类型：String，默认：r
⑩closeBtn - 关闭按钮分格，类型：String/Boolean，默认：1
11，closeBtn - 关闭按钮类型，类型：String/Boolean，默认：1
12，shade - 遮罩，弹出层周围的颜色，类型：String/Array/Boolean，默认：0.3
13，shadeClose - 是否点击遮罩关闭，类型：Boolean，默认：false
14，time - 自动关闭弹出层所需毫秒，类型：Number，默认：0
15，anim - 弹出动画，类型：Number，默认：0
16，isOutAnim - close关闭层过程中的动画，类型：Boolean，默认：true
17，maxmin - 最大最小化。类型：Boolean，默认：false
18，fixed - 是否把弹出层位置固定，类型：Boolean，默认：true
19,resize - 是否允许拉伸弹出层，类型：Boolean，默认：true
20，scrollbar - 是否允许浏览器出现滚动条，类型：Boolean，默认：true
21，maxWidth - 最大宽度，类型：Number，默认：360
22，maxHeight - 最大高度，类型：Number，默认：无
23，moveOut - 是否允许拖拽到窗口外，类型：Boolean，默认：false

1，layer.config(options) - 初始化全局配置。
如：
layer.config({
  anim: 1, //默认动画风格
  skin: 'layui-layer-molv' //默认皮肤
  …
});

2，layer.ready(callback) - 初始化就绪
如：
layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});     

3，layer.open(options) - 原始核心方法
创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数
如：
var index = layer.open({
  content: 'test'
});
//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。       

4，layer.alert(content, options, yes) - 普通信息框
如：
layer.alert('加了个图标', {icon: 1}); 
layer.alert('有了回调', function(index){
  //do something
  layer.close(index);
});    

5，layer.confirm(content, options, yes, cancel) - 询问框
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something
  layer.close(index);
});
layer.confirm('is not?', function(index){
  //do something
  layer.close(index);
});  

6，layer.msg(content, options, end) - 提示框
如：
layer.msg('有表情地提示', {icon: 6}); 
layer.msg('关闭后想做些什么', function(){
  //do something
}); 
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
  //do something
});   

7，layer.close(index) - 关闭特定层
如：
//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一种弹层调用方式，都会返回一个index
layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可

//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

8，layer.closeAll(type) - 关闭所有层

9，layer.tab(options) - 弹出tab层
如：
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});        

——暂时学习至此，后面会续—–