Layui框架使用入门
前言
对于后端开发人员而言,Layui框架的确是一个非常友好的前端页面脚手架,用于开发一些管理后台系统类的项目非常便捷。只需要掌握了传统的Web静态页面开发的三要素:HTML,CSS和JavaScript,就可以轻松掌握对Layui框架的使用。
但是在项目实践中,通常也无需直接基于Layui框架进行开发,大多数情况下可以直接使用Layuimini模板,更加高效和便捷。
使用Layui框架常遇到的问题
对弹窗表单赋值
html代码:
<body>
<div class="layui-form" lay-filter="useradmin" id="useradmin">
<div class="layui-form-item">
<label class="layui-form-label">用 户 名</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</body>
JavaScript代码:
layer.open({
type: 2
,title: '编辑用户'
,content: 'xx.html'
,maxmin: true
,area: ['500px', '450px']
,btn: ['确定', '取消']
,yes: function(index, layero){
省略...
}
,success: function(layero, index){
// 方式一 其实就是获取的 子页面的 div
var div = layero.find('iframe').contents().find('#useradmin'); // div.html() div里面的内容,不包含当前这个div
// 方式二
var body = layer.getChildFrame('body', index); // body.html() body里面的内容
/* ---- 附加内容 看看就好 Begin ---- */
var iframeWindow = window['layui-layer-iframe'+ index] // 方式一: 得到iframe页的窗口对象
var iframeWindow = window[layero.find('iframe')[0]['name']]; // 方式二: 得到iframe页的窗口对象
/* ---- 附加内容 看看就好 End ---- */
// 测试 :
body.find("#username").val("admin"); // 方式一
div.find("#username").val("admin"); // 方式二
}
});
下拉框不显示
html代码:
<div class="layui-form-item">
<label class="layui-form-label">卡片类型</label>
<div class="layui-input-inline">
<select name="type" id="type" lay-filter="type">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
JavaScript代码:
layui.use('form', function(){
var form = layui.form;
form.render();
});
发送Ajax请求
JavaScript代码:
layui.use(['form'], function () {
var $ = layui.jquery,
form = layui.form;
$.ajax({
url: "http://localhost:8080/add",
cache: "false", // 设置为false将不会从浏览器中加载请求信息
async: "false", // true所有请求均为异步请求
dataType: "json", // 请求返回数据的格式
type: "GET", // 请求方式
success: function(data) {
//请求成功后的回调方法
console.log(data);
},
error:function () {
//请求失败后的回调方法
console.log("error: " + data);
}
});
}
【参考】
layui 对弹窗 form表单赋值
layui 下拉框不显示解决方法
JavaScript | 文本复制工具clipboard.js的使用详解
使用 $.ajax 发送json数据示例代码(GET、POST区别)
作者:编程随笔
出处:http://www.cnblogs.com/nuccch/
声明:本文版权归作者和博客园共有,欢迎转载,但请在文章页面明显位置给出原文连接。