温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

layer中Icon样式的示例分析

发布时间:2021-06-26 15:25:06 阅读:177 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下layer中Icon样式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一、layer的icon样式

layer中Icon样式的示例分析

以上样式测试代码:

layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){
 //do something
 alert("确认");
 layer.close(index);
});

二、询问框

官方案例:

//询问框
layer.confirm('您是如何看待前端开发?', {
 btn: ['重要','奇葩'//按钮
}, function(){
 layer.msg('的确很重要', {icon1});
}, function(){
 layer.msg('也可以这样', {
 time20000//20s后自动关闭
 btn: ['明白了''知道了']
 });
});

本人所用到,需要修改标题,正如以上测试样式时的代码一样,实现自定义标题:

 var message = "确定继续?";
  //询问框
  layer.confirm(message, {icon3title:'信息提示'}, function(index){
   //submitForm();
   layer.close(index);
  });

三、提示层

官方案例:

//提示层
layer.msg('玩命提示中');

默认关闭时间是3秒,效果如下(背景是官网的广告,实际效果是黑色半透明):

layer中Icon样式的示例分析

自定义样式以及时间,代码如下:

layer.msg('操作成功!', {icon: 6, time: 2000});

icon样式是6,关闭时间为2秒。效果如下:

layer中Icon样式的示例分析

四、弹框(自定义页)

官方案例:

//自定页
layer.open({
 type1,
 skin'layui-layer-demo', //样式类名
 closeBtn0, //不显示关闭按钮
 anim2,
 shadeClosetrue, //开启遮罩关闭
 content'内容'
});

效果如下:

layer中Icon样式的示例分析

本人使用案例,使用layer实现弹框登录:

layer.open({ 
   type2   title'用户登录'   maxmintrue   skin'layui-layer-lan'   shadeClosetrue, //点击遮罩关闭层 
   area : ['400px' , '280px'], 
   content:'login.html'//弹框显示的url,对应的页面
  });

其中‘login.html'是登录页面,其效果如下:

layer中Icon样式的示例分析

以上是“layer中Icon样式的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×