layui初试用

<script>
layui.use(['layer', 'laypage', 'element'], function(){
  var layer = layui.layer
  ,laypage = layui.laypage
  ,element = layui.element();
  
  //向世界问个好
  layer.msg('Hello World');
 
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  
  //分页
  laypage({
    cont: 'pageDemo' //分页容器的id
    ,pages: 100 //总页数
    ,skin: '#5FB878' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页');
      }
    }
  });
});
</script>

模块化的前台框架，和bootstrap的区别就是模块化。

顾名思义，如上代码块，他会把自己的每个功能模块都直接加载进自己的js框架中，直接使用。

有自己的tpl模板引擎，可能php更适用一点。

没有自己的ajax的模块方法，使用有点难受。（为一个弹出框要加载一次layui框架）

2017-08-03

分页模块尤其难用，如果配置的属性不全会导致分页不出现，然后还不报错。

2017-08-04

layui.paging().get({
   phone: $("#phone").val()
});

layui里分页模块和表格模块一起使用的合体模块，这个get函数能直接提交参数，刷新模块。

2017-08-05

不过出来的效果图还是很棒的，简单清爽，不似bootstrap那样有些花哨。

附原模版作者的博客地址： 模版作者博客