这篇文章主要介绍了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有哪些主要功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。