layui (homophon: UI-like) ist ein Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde. Es folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS. Der Schwellenwert ist extrem niedrig und kann verwendet werden der Box.
Häufig verwendete Methoden in Laui:
Das Eingabe-Optionsfeld in Laui wartet auf das Auswahlauslöseereignis:
Durchsuchen Sie die Eingabe basierend auf dem an die Eingabe gebundenen Lay-Filter und geben Sie dann die Funktionsbeurteilung ein
<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");
}
});Stellen Sie die Schaltfläche so ein, dass je nach Statusbedingungen verschiedene Schaltflächen angezeigt werden:
<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>Verschiedene Popup-Fenster:
Hinweis: Da einige Module einen Layer deklariert haben und andere nicht, wird hier die Methode „layui.layer“ verwendet, um den Layer-Pop aufzurufen -up-Ebene:
Transluzentes Eingabeaufforderungsfeld mit schwarzem Hintergrund, automatisch in 666 Millisekunden geschlossen:
layui.layer.msg(returndata.msg,{time: 666});Blaues Modul, Popup-Animation auf der linken Seite, mit OK-Taste
layui.use('layer', function() {
layer.alert(returndata.msg, {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
});
});Eingabe kann nur Zahlen eingeben, keine andere Eingabe und kein Dezimalpunkt
<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-Maskenebene, Upload startet, Maskenebene nach Erfolg schließen
<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>Zum Ändern klicken:
<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>Datum in Uhrzeit, Minuten und Sekunden formatieren:
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
});
});
}Uhrzeit und Datum formatieren:
<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>Passwortanzeige** ***:
<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>Statusleiste:
<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>
Remote-Daten Erfassung:
<script type="text/html" id="usernameTpl">
<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
</script>Das Formular erhält Wertdaten:
<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>Dies ist die Suchschaltfläche. Klicken Sie, um das Neuladen auszulösen:
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];
}
}
}
}Dies ist das Reload-Ereignis:
Es ist nicht erforderlich, die neu geladene URL anzugeben, Sie müssen sie nur entsprechend der ID der Tabelle neu laden ist die in Layui deklarierte ID, nicht die id="idno" im gewöhnlichen Tag. Übergeben Sie dann die Parameter in where
<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>Hinzufügen oder ändern Nachdem Sie eine Seite geöffnet haben, schließen Sie die Seite und laden Sie das Original neu Seitendatentabelle
<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>Für mehr Laui-bezogenes Wissen beachten Sie bitteLayui-Framework.
Das obige ist der detaillierte Inhalt vonGängige Laui-Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So erhalten Sie die Länge eines Arrays in js
Welche Java-Workflow-Engines gibt es?
Welche Plattformen zur elektronischen Vertragsunterzeichnung gibt es?
Welche Währung ist U-Coin?
Wie zeichnet man ein Pert-Diagramm?
Warum hat WLAN ein Ausrufezeichen?
Der Unterschied zwischen * und & in der C-Sprache
Verwendung der Sortierfunktion sortieren
