请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 3969|回复: 0

layui中layer自力组件详解WEB前端开发

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
     楼主| 发表于 2019-12-4 21:01:12 | 显示全部楼层 |阅读模式

    layer至今仍作为layui的代表作,她的受众普遍并不是偶然,而是这五年多的对峙,不停完善和保护、不停建立和提拔社区服务,使得猿们纷纭自觉流传,乃至于成为本日的Layui最强劲的源动力。

    现在,layer已成为国内最多人运用的web弹层组件,GitHub天然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在运用layer。

    运用场景:

    因为layer能够自力运用,也能够经由过程Layui模块化运用。所以请根据你的现实需求来挑选

    layer至今仍作为layui的代表作,她的受众普遍并不是偶然,而是这五年多的对峙,不停完善和保护、不停建立和提拔社区服务,使得猿们纷纭自觉流传,乃至于成为本日的Layui最强劲的源动力。

    现在,layer已成为国内最多人运用的web弹层组件,GitHub天然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在运用layer。

    运用场景:

    因为layer能够自力运用,也能够经由过程Layui模块化运用。所以请根据你的现实需求来挑选

    1、作为自力组件运用layer

    1. 引入好layer.js后,直接用即可
    2. <script src="layer.js"></script>
    3. <script>
    4.   layer.msg('hello');
    5. </script>
    复制代码

    2、在layui中运用layer

    1. layui.use('layer', function(){
    2.   var layer = layui.layer;
    3.   layer.msg('hello');
    4. });
    复制代码

    除了上面有所差别,别的都完全一致。

    基础参数:

    我们提到的基础参数主要指挪用要领时用到的设置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,个中的content和time等于基础参数,以键值情势存在,基础参数可合理应用于任何层范例中,您不须要一切都去设置,大多数都是可选的。而个中的layer.open、layer.msg就是内置要领。注重,从2.3入手下手,无需经由过程layer.config来加载拓展模块

    type - 基础层范例

    范例:Number,默许:0

    layer供应了5种层范例。可传入的值有:0(信息框,默许)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采纳layer.open({type: 1})体式格局挪用,则type为必填项(信息框除外)

    title - 标题

    范例:String/Array/Boolean,默许:'信息'

    title支撑三种范例的值,若你传入的是平常的字符串,如title :'我是标题',那末只会转变标题文本;若你还须要自定义标题地区款式,那末你能够title: ['文本', 'font-size:18px;'],数组第二项能够写恣意css款式;假如你不想显现标题栏,你能够title: false

    content - 内容

    范例:String/DOM/Array,默许:''

    content可传入的值是天真多变的,不仅能够传入平常的html内容,还能够指定DOM,更能够跟着type的差别而差别。

    1. /!*
    2. 假如是页面层
    3. */
    4. layer.open({
    5.   type: 1,
    6.   content: '传入恣意的文本或html' //这里content是一个平常的String
    7. });
    8. layer.open({
    9.   type: 1,
    10.   content: $('#id') //这里content是一个DOM,注重:最好该元素要存放在body最外层,不然大概被别的的相对元素所影响
    11. });
    12. //Ajax猎取
    13. $.post('url', {}, function(str){
    14.   layer.open({
    15.     type: 1,
    16.     content: str //注重,假如str是object,那末须要字符拼接。
    17.   });
    18. });
    19. /!*
    20. 假如是iframe层
    21. */
    22. layer.open({
    23.   type: 2,
    24.   content: 'http://sentsin.com' //这里content是一个URL,假如你不想让iframe涌现转动条,你还能够content: ['http://sentsin.com', 'no']
    25. });
    26. /!*
    27. 假如是用layer.open实行tips层
    28. */
    29. layer.open({
    30.   type: 4,
    31.   content: ['内容', '#id'] //数组第二项即吸附元素挑选器或许DOM
    32. });
    复制代码

    skin - 款式类名

    范例:String,默许:''

    skin不仅许可你传入layer内置的款式class名,还能够传入您自定义的class名。这是一个很好的切入点,意味着你能够借助skin轻松完成差别的作风定制。

    现在layer内置的skin有:layui-layer-lanlayui-layer-molv,将来我们还会挑选性地内置更多,但更引荐您本身来定义。以下是一个自定义作风的简朴例子

    1. //单个运用
    2. layer.open({
    3.   skin: 'demo-class'
    4. });
    5. //全局运用。即一切弹出层都默许采纳,然则单个设置skin的优先级更高
    6. layer.config({
    7.   skin: 'demo-class'
    8. })
    9. //CSS
    10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
    11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
    12. body .demo-class .layui-layer-btn a{background:#333;}
    13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}

    14. 加上body是为了保证优先级。你能够借助Chrome调试东西,定义更多款式掌握层更多的地区。
    复制代码

    area - 宽高

    范例:String/Array,默许:'auto'

    在默许状态下,layer是宽高都自适应的,但当你只想定义宽度时,你能够area: '500px',高度仍然是自适应的。当你宽高都要定义时,你能够area: ['500px', '300px']

    offset - 坐标
    范例:String/Array,默许:垂直程度居中
    icon - 图标。信息框和加载层的私有参数

    范例:Number,默许:-1(信息框)/0(加载层)

    信息框默许不显现图标。当你想显现图标时,默许皮肤能够传入0-6假如是加载层,能够传入0-2。如:

    1. //eg1
    2. layer.alert('酷了', {icon: 1});
    3. //eg2
    4. layer.msg('不高兴。。', {icon: 5});
    5. //eg3
    6. layer.load(1); //作风1的加载
    复制代码


    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2020-8-12 05:04 , Processed in 0.892587 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表