Was sind die Hauptfunktionen von Laui?

1. Die Paging-Funktion von Layui ist in der Tat sehr einfach Es muss nur ein Gesamtwert übergeben werden. Die Anzahl der Seiten kann diese Funktion gut nutzen. Werfen wir einen Blick auf meine Einführung in das Laui-Framework-Paging. Hinweis: Die Anzahl der übergebenen Seiten ist nicht die Anzahl der Datenbankabfragen

Verwendung von 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>

Verwandte Empfehlungen: „

Layui-Framework-Tutorial

》

2. Layui-Zeit- und Tagesfunktion

Der folgende Code ist eine Start- und Enddatumsfunktion

 <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 -up-Box-Funktion

Verwendung von 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>

Das obige ist der detaillierte Inhalt vonWas sind die Hauptfunktionen von Laui?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!