欢迎光临
我的个人博客网站

LayUI open和confirm使用


1、layUi.open

  • 功能描述
    layer.open 根据type不同,类型也就不一样,有五种类型:  0(信息框,默认)  1(页面层)  2(iframe层)  3(加载层)  4(tips层) 其实工作开发中用的最多的就是1、2这两种类型了,这里就只介绍这两种,其他的可以参考官网例子

  • 页面层(type:1):弹出层展示的是某个定义好的页面元素
    layer.open({     type: 1 //Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层),     title: 'title here',   //标题     area: ['390px', '330px'],   //宽高     shade: 0.4,   //遮罩透明度     content: $("#test"),//支持获取DOM元素     btn: ['确定', '取消'], //按钮组     scrollbar: false ,//屏蔽浏览器滚动条     yes: function(index){//layer.msg('yes');    //点击确定回调         layer.close(index);         showToast();     },     btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////点击取消回调         layer.msg('bbb');//layer.closeAll();     }

  • iframe层(type:2):弹出层直接调用其他地方的页面
    实例1: layer.open({       type: 2, //Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)       shade:0.1, //遮罩层透明度       area:['850px','500px'], //弹出层宽高       title:'材料库',//弹出层标题       content: 'xx/xx.jsp' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']     }); 实例2:  layer.open({                   type: 2, //类型,解析url                   closeBtn: 1, //关闭按钮是否显示 1显示0不显示                   title: title, //页面标题                   shadeClose: true, //点击遮罩区域是否关闭页面                   shade: 0.8,  //遮罩透明度                   area: ['900px', '500px'],  //弹出层页面比例                   content: '${ctx}/manage/classPlan/courseList?isOnline='+type  //弹出层的url             });  实例3:     layer.open({         type : 2,         title : '增加',         maxmin : true,         shadeClose : false, // 点击遮罩关闭层         area : [ '800px', '520px' ],         content : prefix + '/add' // iframe的url     });

2、Layer.confirm

  • 功能描述:点击【确定】按钮,默认执行下面function()中的方法,点击【取消】按钮,则直接关闭确认框,具体示例如下:
    实例1: function remove(id) {     layer.confirm('确定要删除选中的记录?', {         btn : [ '确定', '取消' ]     }, function() {         $.ajax({             url : prefix + "/remove",             type : "post",             data : {                 'id' : id //传入参数             },             success : function(r) {                 if (r.code == 0) {                     layer.msg(r.msg);                     reLoad();                 } else {                     layer.msg(r.msg);                 }             }         });     }) } 实例2 layer.confirm('您确定要删除这条数据吗?', { btn: ['确定','取消'] //按钮 }, function() { layer.closeAll('dialog'); $.ajax({ type: "post", url: "${pageContext.request.contextPath}/cuishou/delete", data: { "id": id }, success : function(data){   } }); });  layer.closeAll('dialog');  点击确定关闭提示框

赞(0) 打赏
未经允许不得转载:张拓的天空 » LayUI open和confirm使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏