layui框架部分功能介绍

注意；代码的所有功能都没有导入layui的css样式

一，分页功能

layui框架分页使用，其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能

下面就看一下我对layui框架分页的介绍，

注意：传入的是页数不是数据库查询的条数

laypage的使用；

<div id="demo1"></div>//界面容器
        
<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
//加载layui
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
laypage({
        cont: 'demo1'//界面容器ID
        ,pages:data.number1 //总页数
         ,groups: 5 //连续显示分页数
        , jump: function(obj, first){
     //得到了当前页，用于向服务端请求对应数据
         var curr = obj.curr;
        //向服务器发送请求通过当前页数去计算查询条数     
                    
    }
  }); 
}; 
</script>

二，layui时间日功能

　　下面的代码的是一个开始结束日期功能

<label class="layui-form-label">时间</label>
    <div  style=" 100px" class="layui-input-inline">
      <input  class="layui-input" placeholder="开始日" id="LAY_demorange_s">
    </div>
    <div style=" 100px" class="layui-input-inline">
      <input  class="layui-input" placeholder="截止日" id="LAY_demorange_e">
    </div>
    <!-- 没有写提交按钮 -->

<script>  
//加载layui
layui.use(['laydate','paging', 'form'], function() {
    var $ = layui.jquery,
            paging = layui.paging(),
            layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
            layer = layui.layer, //获取当前窗口的layer对象
            form = layui.form();
            
    
      var start = {
                min:'1900-01-01 00:00:00'//设置最小日期
                ,max: '2099-06-16 23:59:59'//设置最大日期
                ,istoday: false
                ,choose: function(datas){
                  end.min = datas; //开始日选好后，重置结束日的最小日期
                  end.start = datas //将结束日的初始值设定为开始日
                }
              };
              
      var end = {
                min:'1900-01-01 00:00:00'//设置最小日期
                ,max: '2099-06-16 23:59:59'//设置最大日期
                ,istoday: false
                ,choose: function(datas){
                  start.max = datas; //结束日选好后，重置开始日的最大日期
                }
              };
              
              //LAY_demorange_s日期容器ID
      document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);//对两个日期进行关联
          }
          //LAY_demorange_e日期容器ID
      document.getElementById('LAY_demorange_e').onclick = function(){
        end.elem = this
        laydate(end);//对两个日期进行关联
      }


</script>  

三，弹出框功能

　　本以为面只有详细介绍没有实现具体功能

　　layer.open的使用；

<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
//加载layui
layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
    var addBoxIndex = -1;//记录是否弹出
    //获取事件，点击事件#add按钮id
    $('#add').on('click', function() {
        if(addBoxIndex !== -1)
            return;
        //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
        //ShiJian-form.html弹出后显示的界面
        $.get('ShiJian-form.html', null, function(form) {
            addBoxIndex = layer.open({
                type: 1,
                title: '添加事件',//弹出框标题
                content: form,
                btn: ['保存', '取消'],
                shade: false,
                offset: ['100px', '30%'],
                area: ['700px', '600px'],
                zIndex: 19950924,
                maxmin: true,
                yes: function(index) {
                //确定按钮回调方法
                 layer.close(index);//这块是点击确定关闭这个弹出层
                 
                 location.reload(); //刷新，对弹出前的页面进行刷新
                 setTimeout(function(){  
                      top.layer.close(index);  
                      top.window[iframeName].frames.location.reload();  
                      }, 100);//延时0.1秒，对应360 7.1版本bug  
                },
                full: function(elem) {
                //取消和关闭按钮触发的回调
                    var win = window.top === window.self ? window : parent.window;
                    $(win).on('resize', function() {
                        var $this = $(this);
                        elem.width($this.width()).height($this.height()).css({
                            top: 0,
                            left: 0
                        });
                        elem.children('div.layui-layer-content').height($this.height() - 95);
                    });
                },
                success: function(layero, index) {
                //层弹出后的成功回调方法

                },
                end: function() {
                //层销毁后触发的回调
                    addBoxIndex = -1;
                }
            });
        });
    });
});

});


</script>