layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
layui常用的方法：
layui中的input radio单选框监听选择触发事件：
根据给input绑定的 lay-filter 进行查找input，然后进入函数判断
<div class="layui-form-item">
<label class="layui-form-label">长期短期</label>
<div class="layui-input-block">
<input type="radio" name="term" value="长期" title="长期有效"
lay-filter="term"> <input type="radio" name="term"
value="短期" title="短期有效" lay-filter="term">
</div>
</div>
<div id="termtime" class="layui-hide">
<div id="classdate" class="layui-form-item" style="">
<label class="layui-form-label">开始时间：</label>
<div class="layui-input-block">
<input type="text" name="startdate" id="startdate"
lay-verify="startdate" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">结束时间：</label>
<div class="layui-input-block">
<input type="text" name="enddate" id="enddate"
lay-verify="enddate" autocomplete="off" class="layui-input">
</div>
</div>
</div>form.on('radio(term)', function(data) {
if (data.value == "短期") {
$("#termtime").removeClass("layui-hide");
} else if (data.value == "长期") {
$("#termtime").addClass("layui-hide");
}
});设置按钮根据状态条件显示不同的按钮：
<script type="text/html" id="toolbtn">
{{# if(d.state == true){}}
<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="down">下线</a>
{{# } else { }}
<a class="layui-btn layui-btn-mini " lay-event="up">发布</a>
{{# } }}
</script>各种弹窗：
注：因为有的模块中已经声明layer有的则没有，所以这里都用layui.layer的方式来调用layer弹出层：
半透明黑色背景提示框，666毫秒自动关闭：
layui.layer.msg(returndata.msg,{time: 666});蓝色模块，左边跳出动画，有确定按钮
layui.use('layer', function() {
layer.alert(returndata.msg, {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
});
});input只能输入数字，不能输入其他和小数点
<input type="text" id="num" name="num" placeholder="请输入" autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
layui遮罩层，上传开始，成功后关闭遮罩层
<script type="text/javascript">
function tanchu(){
layui.use('layer', function(){
var layer = layui.layer;
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
});
}
function tanchuclose(){
layui.use('layer', function(){
var layer = layui.layer;
layer.close(layer.index);
});
}
</script><script type="text/javascript">
function upload(){
tanchu();
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: '<%=basePath%>/knowledge/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
tanchuclose();
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}
</script>点击修改：
if(obj.event === 'setSign'){
layer.prompt({
formType: 2
,title: '修改 ID 为 ['+ data.id +'] 的角色页面'
,value: data.homePage
}, function(value, index){
layer.close(index);
$.ajax({
type:"post",
url:"<%=basePath%>/sys/role/update",
data:{role:JSON.stringify(data)},
dataType:"text",//返回的
success:function(data1) {
layer.alert(data1.result);
table.reload('idTest', {
//url: '../user/selectmsguser.do'
url: '<%=basePath%>/sys/role/list1?q=1'
,where: {}
//,height: 300
});
},
error:function(msg) {
cosole.log(msg);
}
});
obj.update({
sign: value
});
});
}格式化日期到时分秒：
<script type="text/html" id="timeTpl">
{{# var fn = function(){
var date=new Date(d.uptime);
var d1=date.getDate();
var y=date.getFullYear();
var m=date.getMonth() + 1;
var HH=date.getHours();
var mm=date.getMinutes();
var ss=date.getSeconds();
return y+'/'+m+'/'+d1+' '+HH+':'+mm+':'+ss;
}; if(true){ }}
{{ fn() }}
{{# } }}
</script>格式化时间日期：
<script type="text/html" id="timeTpl">
{{# var fn = function(){
var date=new Date(d.createtime);
var d1=date.getDate();
var y=date.getFullYear();
var m=date.getMonth() + 1;
return y+'/'+m+'/'+d1;
}; if(true){ }}
{{ fn() }}
{{# } }}
</script>密码显示 ***** ：
<script type="text/html" id="pwd">
{{# var fn = function(){
return '***';
}; if(true){ }}
{{ fn() }}
{{# } }}
</script>状态栏：
<script type="text/html" id="barDemo1"> <a class="layui-btn layui-btn-mini" id="edit" lay-event="edit">保存</a> <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">冻结</a> </script>
<script type="text/html" id="usernameTpl">
<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
</script>远程获取数据：
<script type="text/javascript">
layui.use('form', function() {
var form = layui.form;
$("#tname").children().remove();
$.ajax({
type : "post",
url : "../user/selectallusersrole.do?role=3",
dataType : "json",
sync : "false",
success : function(data) {
for (var a = 0; a < data.data.length; a++) {
$("#tname").append(
"<option class='tname' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
}
form.render('select'); //用ajax追加的需要这样渲染一下
},
error : function() {
}
})
$("#urealname").children().remove();
$.ajax({
type : "post",
url : "../user/selectallusersrole.do?role=4",
dataType : "json",
sync : "false",
success : function(data) {
for (var a = 0; a < data.data.length; a++) {
$("#urealname").append(
"<option class='name' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
}
form.render('select'); //用ajax追加的需要这样渲染一下
},
error : function() {
}
})
$("#cname").children().remove();
$.ajax({
type : "post",
url : "../class/selectclass.do",
dataType : "json",
sync : "false",
success : function(data) {
for (var a = 0; a < data.data.length; a++) {
$("#cname").append(
"<option class='tname' value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")
}
form.render('select'); //用ajax追加的需要这样渲染一下
},
error : function() {
}
})
//form.on('select(username)', function(data) {//给隐藏的input赋值（机构id）
//$("#yincang").val(data.value);
//});
});
</script>表单获取Value数据：
function formLoad(element,data){
var input = document.getElementById(element).getElementsByTagName('input');
for(var i =0;i < input.length;i++){
var inputname = input[i].name;
for(var j in data){
if(inputname == j){
input[i].value = data[j];
}
}
}
}这是搜索按钮，点击触发重载：
<div class="demoTable">
搜索角色：
<div class="layui-inline">
<input class="layui-input" name="name" id="demoReload"
autocomplete="off">
</div>
<button class="layui-btn" style="transform: translateY(-10px);"
data-type="reload">搜索</button>
</div>这是重载事件：
不需要指定重载的url，只需要根据表格的ID就可以重载，这里的ID是在layui声明的的ID，不是普通的标签中id="idno"这样的id，然后再where里面传参数
<script>
layui.use('table', function(){
var table = layui.table;
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('idTest', {
page: {
curr: 1 //重新从第 1 页开始
},
where: {
name: demoReload.val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>添加或修改打开一个页面后，关闭页面重载原来页面数据表格
$("#addBookbtn").click(function(){
layer.open({
type: 2,
title:['添加新书信息','font-size:22px'],
area: ['400px', '420px'],
content: '../jsp/addbook.jsp',
cancel: function(index, layero){
layer.confirm('是否关闭?', {icon: 3, title:'提示'}, function(index){
layer.close(index);
table.reload("booktable");
});
}
});
});更多layui相关知识请关注layui框架。
Atas ialah kandungan terperinci layui常用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Tutorial membeli dan menjual Bitcoin di Huobi.com
Bagaimana untuk membuka vt
Bagaimana untuk menukar excel kepada vcf
Bagaimana untuk menyemak pautan mati di tapak web anda
Bagaimana untuk menukar jenis fail dalam win7
Apakah perbezaan antara JD International dikendalikan sendiri dan JD dikendalikan sendiri
Peranan perintah terminal linux
Bagaimana untuk menulis segitiga dalam css
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
