Layui使用ajax请求
用法如下：
<button class="layui-btn layui-btn-sm layui-bg-orange" onclick="dele({$vo.id});">删除</button>
js代码如下：
<script>
function dele(id){
layui.use('layer',function(){
var layer = layui.layer;
layer.msg('你确定删除么？', {
time: 2000 ,//2秒自动关闭
btn: ['确定', '取消'],
yes: function(index){
console.log(id);
$.ajax({
url:"ajax地扯",
data:{'id':id},
type:"Post",
dataType:"json",
success:function(data){
console.log(data);
layer.msg(data.msg);
location.reload(); //删除成功后再刷新
},
error:function(data){
$.messager.alert('错误',data.msg);
}
});
layer.close(index);
}
});
});
};
</script>
效果图如下：
layer.msg的使用
layer.msg('只想弱弱提示');
layer.msg('表情提示', {icon: 6});
layer.msg('关闭后想做些什么呢', function(){
//自动执行这里面的内容
});
// 第三种
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
//2秒后自动执行这里面的内容
});
layui弹窗的使用
关键代码如下：
var truelogin = "admin";
var truepwd = "123456";
layui.use('layer', function () {
var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
var index = layer.alert(msgalert, {
icon: 6, //icon数字参数
time: 2000, //时间(默认是毫秒)，2000为 2秒
offset: 't', //t为顶部，b为底部，m为中间，r为右侧，l为左侧
closeBtn: 0, //是否显示弹出窗右上角的关闭按钮 0为不显示 ，1为显示。
title: '友情提示', //弹出窗的标题
btn: [], //弹出窗的底部按钮
anim: 2,
shade: 0
});
layer.style(index, {
color: '#777'
});
});
Layui弹窗加载页面
用法如下：
<div class="layui-input-inline add_admin" style="width:95px;">
<a class="layui-btn layui-btn-sm" href="javascript:void(0);">
<i class="layui-icon"></i> 添加管理员
</a>
</div>
js代码如下：
<script>
layui.use(['element','jquery','layer'], function(){
var element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
$('.add_admin').click(function () {
layer.open({
type: 2,
title:'添加管理员',
skin: 'layui-layer-rim', //加上边框
maxmin: true, //开启最大化最小化按钮
area: ['600px', '400px'],
content:"加载的页面地扯"
});
});
});
</script>
layui开关switch的使用
用法如下：
<input type="checkbox" name="switch" lay-skin="switch" lay-text="正常|关闭"
lay-filter="switchTest"
value="1">
<div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch">
<em>ON</em><i></i>
</div>
js代码如下：
<script>
// 状态监听开关
layui.use(['form'], function () {
var form = layui.form
, layer = layui.layer
//监听指定开关
form.on('switch(switchTest)', function (data) {
if (this.checked) {
layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅 仅是ON|OFF', data.othis)
} else {
layer.msg('开关： 关掉了', {
offset: '6px'
});
}
//do some ajax opeartiopns;
});
});
</script>
效果图如下：
