一、分页功能
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有什么主要功能的详细内容，更多请关注Work网其它相关文章！