文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

layer中Icon样式的示例分析

2024-04-02 19:55

关注

小编给大家分享一下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('的确很重要', {icon: 1});
}, function(){
 layer.msg('也可以这样', {
 time: 20000, //20s后自动关闭
 btn: ['明白了', '知道了']
 });
});

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

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

三、提示层

官方案例:

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

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

layer中Icon样式的示例分析

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

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

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

layer中Icon样式的示例分析

四、弹框(自定义页)

官方案例:

//自定页
layer.open({
 type: 1,
 skin: 'layui-layer-demo', //样式类名
 closeBtn: 0, //不显示关闭按钮
 anim: 2,
 shadeClose: true, //开启遮罩关闭
 content: '内容'
});

效果如下:

layer中Icon样式的示例分析

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

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

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

layer中Icon样式的示例分析

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯