layui有什么主要功能

一、分页功能

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框架教程》

二、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>

以上就是layui有什么主要功能的详细内容，更多内容请关注技术你好其它相关文章！