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>