layer和layui的用法

layer的话先引入jq1.8以上版本，然后引入layer文件，就可以去官网找想要的样式复制用了，layer:open之类的。

layui加载他的css文件就好，手机号，邮箱，身份证验证什么都有，复制过去就能用。导航栏也还能看。

动态选项卡。

进度条这个好像很好玩。

<link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css"  media="all">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态改变进度</legend>
</fieldset>

<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="setPercent">设置50%</button>
  <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,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);
        }
        layui.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>

这个表格很好看，以后显示数据就用他了