Home  >  Article  >  Web Front-end  >  What are the main functions of layui?

What are the main functions of layui?

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼Original
2019-07-11 13:11:283925browse

What are the main functions of layui?

1. Paging function

layui framework paging is used. In fact, layui paging is very simple. You only need to pass in a total The number of pages can make good use of this function. Let’s take a look at my introduction to layui framework paging.

Note: The number of pages passed in is not the number of database queries

Use of laypage;

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

Related recommendations: "layui framework tutorial

2. Layui time and day function

The following code is a start and end date function

 <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([&#39;laydate&#39;,&#39;paging&#39;, &#39;form&#39;], 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:&#39;1900-01-01 00:00:00&#39;//设置最小日期
                 ,max: &#39;2099-06-16 23:59:59&#39;//设置最大日期
                 ,istoday: false
                 ,choose: function(datas){
                   end.min = datas; //开始日选好后,重置结束日的最小日期
                   end.start = datas //将结束日的初始值设定为开始日
                 }
               };
 
       var end = {
                 min:&#39;1900-01-01 00:00:00&#39;//设置最小日期
                 ,max: &#39;2099-06-16 23:59:59&#39;//设置最大日期
                 ,istoday: false
                 ,choose: function(datas){
                   start.max = datas; //结束日选好后,重置开始日的最大日期
                 }
               };
 
               //LAY_demorange_s日期容器ID
       document.getElementById(&#39;LAY_demorange_s&#39;).onclick = function(){
             start.elem = this;
             laydate(start);//对两个日期进行关联
           }
           //LAY_demorange_e日期容器ID
       document.getElementById(&#39;LAY_demorange_e&#39;).onclick = function(){
         end.elem = this
         laydate(end);//对两个日期进行关联
       }
 
 </script>

3. Pop-up box function

Usage of layer.open;

 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
 
 <script>
 //加载layui
 layui.use(&#39;layer&#39;, function(){ //独立版的layer无需执行这一句
   var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
     var addBoxIndex = -1;//记录是否弹出
     //获取事件,点击事件#add按钮id
     $(&#39;#add&#39;).on(&#39;click&#39;, function() {
         if(addBoxIndex !== -1)
             return;
         //本表单通过ajax加载 --以模板的形式,当然你也可以直接写在页面上读取
         //ShiJian-form.html弹出后显示的界面
         $.get(&#39;ShiJian-form.html&#39;, null, function(form) {
             addBoxIndex = layer.open({
                 type: 1,
                 title: &#39;添加事件&#39;,//弹出框标题
                 content: form,
                 btn: [&#39;保存&#39;, &#39;取消&#39;],
                 shade: false,
                 offset: [&#39;100px&#39;, &#39;30%&#39;],
                 area: [&#39;700px&#39;, &#39;600px&#39;],
                 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(&#39;resize&#39;, function() {
                         var $this = $(this);
                         elem.width($this.width()).height($this.height()).css({
                             top: 0,
                             left: 0
                         });
                         elem.children(&#39;div.layui-layer-content&#39;).height($this.height() - 95);
                     });
                 },
                 success: function(layero, index) {
                 //层弹出后的成功回调方法
 
                 },
                 end: function() {
                 //层销毁后触发的回调
                     addBoxIndex = -1;
                 }
             });
         });
     });
 });
 
 });
 
 </script>

The above is the detailed content of What are the main functions of layui?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn