layui框架部分功能介绍
博客专区 > 君少0 的博客 > 博客详情
layui框架部分功能介绍
君少0 发表于3个月前
layui框架部分功能介绍
  • 发表于 3个月前
  • 阅读 25
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

注意;代码的所有功能都没有导入layui的css样式

一,分页功能

layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能

下面就看一下我对layui框架分页的介绍,

注意:传入的是页数不是数据库查询的条数

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

二,layui时间日功能

  下面的代码的是一个开始结束日期功能

 1 <label class="layui-form-label">时间</label>
 2     <div style="width: 100px" class="layui-input-inline">
 3       <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
 4     </div>
 5     <div style="width: 100px" class="layui-input-inline">
 6       <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
 7     </div>
 8     <!-- 没有写提交按钮 -->
 9 
10 <script>  
11 //加载layui
12 layui.use(['laydate','paging', 'form'], function() { 13     var $ = layui.jquery, 14  paging = layui.paging(), 15  layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
16  layer = layui.layer, //获取当前窗口的layer对象
17  form = layui.form(); 18             
19     
20       var start = { 21  min:'1900-01-01 00:00:00'//设置最小日期
22  ,max: '2099-06-16 23:59:59'//设置最大日期
23  ,istoday: false
24  ,choose: function(datas){ 25  end.min = datas; //开始日选好后,重置结束日的最小日期
26  end.start = datas //将结束日的初始值设定为开始日
27  } 28  }; 29               
30       var end = { 31  min:'1900-01-01 00:00:00'//设置最小日期
32  ,max: '2099-06-16 23:59:59'//设置最大日期
33  ,istoday: false
34  ,choose: function(datas){ 35  start.max = datas; //结束日选好后,重置开始日的最大日期
36  } 37  }; 38               
39               //LAY_demorange_s日期容器ID
40  document.getElementById('LAY_demorange_s').onclick = function(){ 41  start.elem = this; 42  laydate(start);//对两个日期进行关联
43  } 44           //LAY_demorange_e日期容器ID
45  document.getElementById('LAY_demorange_e').onclick = function(){ 46  end.elem = this
47  laydate(end);//对两个日期进行关联
48  } 49 
50 
51 </script>

三,弹出框功能

  本以为面只有详细介绍没有实现具体功能

  layer.open的使用;

 1 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 2 <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
 3 
 4 <script>
 5 //加载layui
 6 layui.use('layer', function(){ //独立版的layer无需执行这一句
 7   var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
 8     var addBoxIndex = -1;//记录是否弹出
 9     //获取事件,点击事件#add按钮id
10  $('#add').on('click', function() { 11         if(addBoxIndex !== -1) 12             return; 13         //本表单通过ajax加载 --以模板的形式,当然你也可以直接写在页面上读取
14         //ShiJian-form.html弹出后显示的界面
15  $.get('ShiJian-form.html', null, function(form) { 16  addBoxIndex = layer.open({ 17  type: 1, 18  title: '添加事件',//弹出框标题
19  content: form, 20  btn: ['保存', '取消'], 21  shade: false, 22  offset: ['100px', '30%'], 23  area: ['700px', '600px'], 24  zIndex: 19950924, 25  maxmin: true, 26  yes: function(index) { 27                 //确定按钮回调方法
28  layer.close(index);//这块是点击确定关闭这个弹出层
29                  
30  location.reload(); //刷新,对弹出前的页面进行刷新
31  setTimeout(function(){ 32  top.layer.close(index); 33  top.window[iframeName].frames.location.reload(); 34  }, 100);//延时0.1秒,对应360 7.1版本bug 
35  }, 36  full: function(elem) { 37                 //取消和关闭按钮触发的回调
38                     var win = window.top === window.self ? window : parent.window; 39  $(win).on('resize', function() { 40                         var $this = $(this); 41  elem.width($this.width()).height($this.height()).css({ 42  top: 0, 43  left: 0
44  }); 45  elem.children('div.layui-layer-content').height($this.height() - 95); 46  }); 47  }, 48  success: function(layero, index) { 49                 //层弹出后的成功回调方法
50 
51  }, 52  end: function() { 53                 //层销毁后触发的回调
54  addBoxIndex = -1; 55  } 56  }); 57  }); 58  }); 59 }); 60 
61 }); 62 
63 
64 </script>

 

共有 人打赏支持
粉丝 0
博文 1
码字总数 988
×
君少0
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: