LayUi

1.layui 图标的使用

第一步：引入文件。

<script type="text/javascript"	src="./layui/layui.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css">

第二步：需要一个容器，例如DIV,TABLE,UL,并添加样式。

<div class="layui-icon">&#xe68f;</div> //第一种方式
<div class="layui-icon layui-icon-login-qq"></div> //第二种方式
&amp;#xe68f; //显示图标的字符
<input type="text" value="&amp;#xe68f;">//将图标字符添加为input的value

查看样式：https://www.layui.com/doc/element/icon.html

2.layui按钮的使用

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

（可以搭载多个样式）
按钮组的使用（放到一个按钮组里，本身样式仍然可以改变）。

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>
(重要使用)layui使用jquery
<script>
layui.use(["jquery"],function{
var $=layui.jquery;
$(".layui-btn").click(function(){
alert("$(this).html()")
})
})
</script>

3.layui导航栏的使用

第一步：导入文件。
第二步：编写添加模块。

<script type="text/javascript">
layui.use(['element'],function(){
})
</script>

第三步：使用。

  <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="//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>

**

4.选项卡

**
第一步：导入文件。
第二步：编写添加模块。

<script type="text/javascript">
layui.use(['element'],function(){
})
</script>

第三步：使用。

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <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>
</div> 

还有其他属性：lay-allowClose=“true”，可以关闭的tab。

<div class="layui-tab" lay-allowClose="true">
  <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 class="layui-tab-item">6</div>
  </div>
</div>
      

其他操作，例如添加tab：

<script type="text/javascript">
layui.use(['element','jquery'],function(){
var $=layui.jquery;
var element=layui.element;

$('#add').click(function (){
element.tabAdd('demo',{
title: 'tab标题'
  ,content: '选项卡的内容' //支持传入html
  ,id: '选项卡标题的lay-id属性值'});
})
})

</script>

lay-filter 任意字符 事件过滤器（公用属性），主要用于事件的精确匹配，跟id选择器是比较类似的。

<div class="layui-tab" lay-allowClose="true" lay-filter="demo">
  <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 class="layui-tab-item">6</div>
  </div>
</div>
<button type="button" class="layui-btn" id="add">添加tab</button>
      

**

5.进度条

**
第一步：导入文件。
第二步：编写添加模块。

<script type="text/javascript">
layui.use(['element'],function(){
var element=layui.element;
})
</script>

第三步：使用。

属性 lay-percent ：代表进度条的初始百分比，你也可以动态改变进度。

<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="10%"></div>
</div>

当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="10%"></div>
</div>

通过对父级元素设置属性 lay-showPercent=“yes” 来开启进度比的文本显示，支持：普通数字、百分数、分数（layui 2.1.7 新增）。
layui-bg-red表示颜色。

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

相关的动态操作：

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
	  loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>

<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>

<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
  <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>

**

6.面板

**

卡片面板：
第一步：导入文件。
第二步：编写添加模块。

<script type="text/javascript">
layui.use(['element'],function(){
var element=layui.element;
})
</script>

第三步：使用。
layui-row ：代表一行。
layui-col-space15：每列的间距。
layui-col-md6：代表一列。md6：代表当前卡片占一行的多少份。

   <div style="padding: 20px; background-color: #F2F2F2;">
      <div class="layui-row layui-col-space15">//代表一行
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
              卡片式面板面板通常用于非白色背景色的主体内<br>
              从而映衬出边框投影
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
              结合 layui 的栅格系统<br>
              轻松实现响应式布局
            </div>
          </div>
        </div>
      </div>
    </div>

折叠面板：
layui-collapse：代表折叠面板。
layui-colla-item：代表一个item。
layui-colla-title：代表item的名字。
layui-colla-content：表示item的内容，
layui-show：表示默认展开item。

 <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">杜甫</h2>
          <div class="layui-colla-content layui-show">
            <p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">李清照</h2>
          <div class="layui-colla-content">
            <p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">鲁迅</h2>
          <div class="layui-colla-content">
            <p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
          </div>
        </div>
      </div>

面板嵌套：

<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">文豪</h2>
    <div class="layui-colla-content layui-show">
    
      <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">唐代</h2>
          <div class="layui-colla-content layui-show">
            
            <div class="layui-collapse" lay-accordion>
              <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">
                  <p>据说是韩国人</p>
                </div>
              </div>
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">王勃</h2>
                <div class="layui-colla-content">
                  <p>千古绝唱《滕王阁序》</p>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">宋代</h2>
          <div class="layui-colla-content">
            <p>比如苏轼、李清照</p>
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">当代</h2>
          <div class="layui-colla-content">
            <p>比如贤心</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">科学家</h2>
    <div class="layui-colla-content">
      <p>伟大的科学家</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">艺术家</h2>
    <div class="layui-colla-content">
      <p>浑身散发着艺术细胞</p>
    </div>
  </div>
</div>

**

7.布局

**
例如：

移动：6/12、桌面：4/12

**

8.徽章

**
layui-badge-dot：小圆点。
layui-badge：弧形徽章。
layui-badge-rim：边框徽章。

<blockquote class="layui-elem-quote layui-quote-nm">
  小圆点：
  <span class="layui-badge-dot"></span>
  <span class="layui-badge-dot layui-bg-orange"></span>
  <span class="layui-badge-dot layui-bg-green"></span>
  <span class="layui-badge-dot layui-bg-cyan"></span>
  <span class="layui-badge-dot layui-bg-blue"></span>
  <span class="layui-badge-dot layui-bg-black"></span>
  <span class="layui-badge-dot layui-bg-gray"></span>
  
  <br><br>常规弧形徽章：
  <span class="layui-badge">6</span>
  <span class="layui-badge">99</span>
  <span class="layui-badge">61728</span>
  <span class="layui-badge">赤</span>
  <span class="layui-badge layui-bg-orange">橙</span>
  <span class="layui-badge layui-bg-green">绿</span>
  <span class="layui-badge layui-bg-cyan">青</span>
  <span class="layui-badge layui-bg-blue">蓝</span>
  <span class="layui-badge layui-bg-black">黑</span>
  <span class="layui-badge layui-bg-gray">灰</span>
  
  <br><br>边框徽章：
  <span class="layui-badge-rim">6</span>
  <span class="layui-badge-rim">Hot</span>
</blockquote> 

**

9.时间线

layui-timeline:代表时间线。
ayui-timeline-item:代表时间节点。
layui-timeline-axis：代表左边的线。
layui-timeline-content：代表时间线内容。
layui-text：代表文本。
layui-timeline-title：代表标题。
**

<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">&#xe650;</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>
        中国人民抗日战争胜利日
        <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>

**

10.动画

**
第一步：导入文件。
第二步：编写添加模块。

<style>
.site-doc-icon li{width: 222px;}
.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
</style>

<script>
layui.use('jquery', function(){
  var $ = layui.$;
  
  //演示动画
  $('.site-doc-icon .layui-anim').on('click', function(){
    var othis = $(this), anim = othis.data('anim');
 
    //停止循环
    if(othis.hasClass('layui-anim-loop')){
      return othis.removeClass(anim);
    }
    
    othis.removeClass(anim);
    
    setTimeout(function(){
      othis.addClass(anim);
    });
    //恢复渐隐
    if(anim === 'layui-anim-fadeout'){
      setTimeout(function(){
        othis.removeClass(anim);
      }, 1300);
    }
  });
});
</script>

第三步：使用
layui-anim：样式。
layui-anim-up：动画类型。

<ul class="site-doc-icon site-doc-anim">
  <li>
    <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
    <div class="code">layui-anim-up</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
    <div class="code">layui-anim-upbit</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
    <div class="code">layui-anim-scale</div>
  </li>
   <li>
    <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
    <div class="code">layui-anim-scaleSpring</div>
  </li>
</ul>
<ul class="site-doc-icon site-doc-anim">
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
    <div class="code">layui-anim-fadein</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
    <div class="code">layui-anim-fadeout</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
    <div class="code">layui-anim-rotate</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
    <div class="code">追加：layui-anim-loop</div>
  </li>
</ul>          

11.颜色选择器

<script>
layui.use('colorpicker', function(){
  var $ = layui.$
  ,colorpicker = layui.colorpicker;
  //常规使用
  colorpicker.render({
    elem: '#test1' //绑定元素
    ,change: function(color){ //颜色改变的回调
      layer.tips('选择了：'+ color, this.elem, {
        tips: 1
      });
    }
  });
   
  //初始色值
  colorpicker.render({
    elem: '#test2'
    ,color: '#2ec770' //设置默认色
    ,done: function(color){
      layer.tips('选择了：'+ color, this.elem);
    }
  });
  
  //表单赋值
  colorpicker.render({
    elem: '#test-form'
    ,color: '#1c97f5'
    ,done: function(color){
      $('#test-form-input').val(color);
    }
  });
  });
</script>

//常规使用
<div style="margin-left: 30px;">
  <div id="test1"></div>
  <div id="test2" style="margin-left: 30px;"></div>
</div>
//表单赋值
<div style="margin-left: 30px;">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <div class="layui-input-inline" style="width: 120px;">
        <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
      </div>
      <div class="layui-inline" style="left: -11px;">
        <div id="test-form"></div>
      </div>
    </div>
  </form>
</div>

**

12.滑块

**

<script>
layui.use('slider', function(){
  var $ = layui.$
  ,slider = layui.slider;
  //默认滑块
  slider.render({
    elem: '#slideTest1'
  });
</script>

//基本滑块
<div id="slideTest1" class="demo-slider"></div>