这篇文章将为大家详细讲解有关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时间日功能
下面的代码的是一个开始结束日期功能
<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框架有哪些主要功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。