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="width: 100px" class="layui-input-inline">
       <input  class="layui-input" placeholder="开始日" id="LAY_demorange_s">
     </div>
     <div style="width: 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>