精华内容
下载资源
问答
  • layer.js 下载

    2020-08-18 11:30:21
    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
  • layer.js

    2019-01-11 14:51:01
    layer.js库,资源全;包含了css、js、图片等其他,下载解压,即可使用
  • 今天小编就为大家分享一篇layer.js open 隐藏滚动条的例子,具有很好的参考价值,希望对大家有所帮助。 一起跟随小编过来看看吧
  • arcgis js api 加载echarts,需引入Echarts3Layer.js,可以放在本地目录,引用时候注意可以直接引用本地路径
  • layer.js用法例子

    2018-08-28 08:48:32
    关于layer.js的一些用法,功能也只是做一些页面的美化,只是功能上不是专门的提供功能组件的js
  • layer.js,,,一个好用的弹出层,废话不多说,为了凑够50个字
  • 本文实例讲述了thinkPHP框架中layer.js的封装与使用方法。分享给大家供大家参考,具体如下: v层:(还没实现功能的) <!DOCTYPE html> <html lang=zh-cn> <head> <meta charset=UTF-8> <...
  • layer.min.js

    2016-06-28 18:01:36
    layer有自己的官网,我这里长传只是为了便于我文档需要。
  • layer.js插件

    2019-02-25 10:35:58
    layer.js可以实现出现弹框,确认消息,用起来简单方便
  • require([‘{GARCIA_JS}layer/layer.js‘],function(layer){layer.config({path:‘{GARCIA_JS}layer/‘ //layer.js所在的目录,可以是绝对目录,也可以是相对目录});$(document).on(‘click‘,‘#checkButton‘,...

    require([‘{GARCIA_JS}layer/layer.js‘],function(layer){

    layer.config({

    path:‘{GARCIA_JS}layer/‘ //layer.js所在的目录,可以是绝对目录,也可以是相对目录

    });

    $(document).on(‘click‘,‘#checkButton‘,function(){var code=$("input[name=‘checkCode‘]").val();if($("input[name=‘checkCode‘]").val()==‘‘){

    layer.msg(‘请输入核销码‘, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });return false;

    }

    $.ajax({

    url:"{php echo $this->createWebUrl(‘yongjin‘,array(‘display‘=>‘search_order‘))}",

    type:‘post‘,

    dataType:‘json‘,

    data:{

    checkCode:$("input[name=‘checkCode‘]").val()

    },

    success:function(ret){if(ret.errorCode==0){

    layer.prompt({

    formType:3,

    value:$.trim(code),

    title:‘请确认核销码‘,

    },function(value, index, elem){

    $.ajax({

    url:"{php echo $this->createWebUrl(‘yongjin‘,array(‘display‘=>‘change_status‘))}",

    type:‘post‘,

    dataType:‘json‘,

    data:{

    checkCode:value

    },

    success:function(res) {if(res.errorCode==0){

    layer.msg(res.msg, {

    icon:1,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    location.reload()

    }else{

    layer.msg(res.msg, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    }

    }

    })

    layer.close(index);

    });

    }else if(ret.errorCode==2){

    layer.msg(ret.msg, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    }else{

    layer.msg(ret.msg, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    }

    }

    })

    });

    })

    展开全文
  • require([‘{GARCIA_JS}layer/layer.js‘],function(layer){layer.config({path:‘{GARCIA_JS}layer/‘ //layer.js所在的目录,可以是绝对目录,也可以是相对目录});$(document).on(‘click‘,‘#checkButton‘,...

    require([‘{GARCIA_JS}layer/layer.js‘],function(layer){

    layer.config({

    path:‘{GARCIA_JS}layer/‘ //layer.js所在的目录,可以是绝对目录,也可以是相对目录

    });

    $(document).on(‘click‘,‘#checkButton‘,function(){var code=$("input[name=‘checkCode‘]").val();if($("input[name=‘checkCode‘]").val()==‘‘){

    layer.msg(‘请输入核销码‘, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });return false;

    }

    $.ajax({

    url:"{php echo $this->createWebUrl(‘yongjin‘,array(‘display‘=>‘search_order‘))}",

    type:‘post‘,

    dataType:‘json‘,

    data:{

    checkCode:$("input[name=‘checkCode‘]").val()

    },

    success:function(ret){if(ret.errorCode==0){

    layer.prompt({

    formType:3,

    value:$.trim(code),

    title:‘请确认核销码‘,

    },function(value, index, elem){

    $.ajax({

    url:"{php echo $this->createWebUrl(‘yongjin‘,array(‘display‘=>‘change_status‘))}",

    type:‘post‘,

    dataType:‘json‘,

    data:{

    checkCode:value

    },

    success:function(res) {if(res.errorCode==0){

    layer.msg(res.msg, {

    icon:1,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    location.reload()

    }else{

    layer.msg(res.msg, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    }

    }

    })

    layer.close(index);

    });

    }else if(ret.errorCode==2){

    layer.msg(ret.msg, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    }else{

    layer.msg(ret.msg, {

    icon:7,

    time:2000 //2秒关闭(如果不配置,默认是3秒)

    });

    }

    }

    })

    });

    })

    展开全文
  • layui版本光引入layui.js还不够,还要在引入的文件后加下面代码才 layui.use(['layer'], function(){ var layer=layui.layer; }); --> 否则总是提示parent.layer.open()总是提示TypeError: parent.layer is ...
  • 基于jquery的layer.js增删改查封装,满足多种操作。。。
  • 使用H-UI框架中的layer弹出层时发现 layer.js中没有layer.prompt,如果想要使用layer.prompt可以使用layer中的use从扩展中加载此扩展方法 代码如下: layer.use('extend/layer.ext.js', function(){ layer.ext = ...
  • layer.js

    千次阅读 2016-12-15 20:02:48
     我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要...
    1、、基础参数
      我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意,从2.3开始,无需通过layer.config来加载拓展模块
    (1)、type - 基本层类型

      类型:Number,默认:0

      layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

    (2)、title - 标题
      类型:String/Array/Boolean,默认:'信息'
      title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
    (3)、content - 内容
    类型:String/DOM/Array,默认:''

    content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

    /!*
     如果是页面层
     */
    layer.open({
      type: 1, 
      content: '传入任意的文本或html' //这里content是一个普通的String
    });
    layer.open({
      type: 1,
      content: $('#id') //这里content是一个DOM
    });
    //Ajax获取
    $.post('url', {}, function(str){
      layer.open({
        type: 1,
        content: str //注意,如果str是object,那么需要字符拼接。
      });
    });
    /!*
     如果是iframe层
     */
    layer.open({
      type: 2, 
      content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
    }); 
    /!*
     如果是用layer.open执行tips层
     */
    layer.open({
      type: 4,
      content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
    });        
    (4)、skin - 样式类名
      类型:String,默认:''
      skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lan、layui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。

    (5)、area - 宽高
      类型:String/Array,默认:'auto'
      在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']
    (6)、offset - 坐标
      类型:String/Array,默认:垂直水平居中
      offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:


    (7)、icon - 图标。信息框和加载层的私有参数
      类型:Number,默认:-1(信息框)/0(加载层)
      信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6,如果是加载层,可以传入0-2。

    (8)、btn - 按钮

      类型:String/Array,默认:'确认'
      信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1和按钮2的回调分别是yes和cancel,而从按钮3开始,则回调为btn3: function(){},以此类推。

    (9)、btnAlign - 按钮排列
      类型:String,默认:r
      你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。btnAlign: 'l',按钮左对齐;btnAlign: 'c',按钮居中对齐。

    (10)、closeBtn - 关闭按钮
      类型:String/Boolean,默认:1
      layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0
    (11)、shade - 遮罩
      类型:String/Array/Boolean,默认:0.3
      即弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
    (12)shadeClose - 是否点击遮罩关闭
      类型:Boolean,默认:false
      如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。
    (13)、time - 自动关闭所需毫秒
      类型:Number,默认:0
      默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)
    (14)、id - 用于控制弹层唯一标识
      类型:String,默认:空字符
      设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
    (15)anim - 动画
      类型:Number,默认:0
      我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 ,(请注意,3.0之前的版本用的 shift 参数)
    (16)maxmin - 最大最小化。
      类型:Boolean,默认:false
      该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
    (17)fixed - 固定
      类型:Boolean,默认:true
      即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
    (18)、resize - 是否允许拉伸
      类型:Boolean,默认:true
      默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效
    (19)、scrollbar - 是否允许浏览器出现滚动条
      类型:Boolean,默认:true
      默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽
    (20)、maxWidth - 最大宽度
      类型:,默认:360
      请注意:只有当area: 'auto'时,maxWidth的设定才有效。
    (21)、zIndex - 层叠顺序
      类型:,默认:19891014(贤心生日 0.0)
      一般用于解决和其它组件的层叠冲突。
    (22)、move - 触发拖动的元素
      类型:String/DOM/Boolean,默认:'.layui-layer-title'
      默认是触发标题区域拖拽。如果你想单独定义,指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽
    (23)、moveOut - 是否允许拖拽到窗口外
      类型:Boolean,默认:false
      默认只能在窗口内拖拽,如果你想让拖到窗外,那么设定moveOut: true即可
    (24)、moveEnd - 拖动完毕后的回调方法
      类型:Function,默认:null
      默认不会触发moveEnd,如果你需要,设定moveEnd: function(){}即可。
    (25)、tips - tips方向和颜色
      类型:Number/Array,默认:2
      tips层的私有参数。支持上右下左四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, '#c00']
    (26)、tipsMore - 是否允许多个tips
      类型:Boolean,默认:false
      允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
    (27)、success - 层弹出后的成功回调方法
      类型:Function,默认:null
      当你需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数,分别是当前层DOM当前层索引。

    (28)、yes - 确定按钮回调方法
      类型:Function,默认:null
      该回调携带两个参数,分别为当前层索引、当前层DOM对象。

    layer.open({
      content: '测试回调',
      yes: function(index, layero){
        //do something
        layer.close(index); //如果设定了yes回调,需进行手工关闭
      }
    }); 
    (29)、cancel - 右上角关闭按钮触发的回调
      类型:Function,默认:null
      该回调同样只携带当前层索引一个参数,无需进行手工关闭。如果不想关闭,return false即可,

    //只有当点击confirm框的确定时,该层才会关闭
    cancel: function(index){ 
      if(confirm('确定要关闭么')){
        layer.close(index)
      }
      return false; 
    }   
    (30)、end - 层销毁后触发的回调
      类型:Function,默认:null
      无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
    (31)、full/min/restore -分别代表最大化、最小化、还原 后触发的回调
      类型:Function,默认:null

      携带一个参数,即当前层DOM

    2、实例

    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layer-更懂你的web弹窗解决方案</title>
      <script src="layer/jquery-1.10.2.min.js"></script>
      <script src="layer/layer.js"></script>
      <link rel="stylesheet" href="layer/skin/default/layer.css" />
      <style>
      	div.conten{
      		width: 100%;
      		border: 2px solid #C9C5C5;
      		margin-bottom: 10px;
      		box-shadow: 5px 5px #CCCCCC;
      		text-align: center;
      	}
      	button.bt{
      		width: 100px;
      		height: 40px;
      		line-height: 40px;
      		background-color:#2D93CA;
      		border-radius: 10px;
      		color:white;
      		text-align: center;
      		font-weight: bold;
      		font-size: 15px;
      	}
      	.layer_notice{
      		margin-bottom: 10px;
      		text-align: center;
      		width:200px;
      		color: #999999;
      		margin: 0px auto;
      	}
      	.layer-photos-demo{
      		text-align: center;
      		width:500px;
      		color: #999999;
      		margin: 0px auto;
      		border: 2px solid #C9C5C5;
      		margin-bottom: 10px;
      		box-shadow: 5px 5px #CCCCCC;
      	}
      	body .demo-class .layui-layer-demo{background:#333;}
      </style>
    </head>
    <body>
    <div class="conten">
    		<button οnclick="common(1)" class="bt">普通信息框</button>
    		<button οnclick="common(2)" class="bt">图标</button>
    		<button οnclick="common(3)" class="bt">询问框</button>
    		<button οnclick="common(4)" class="bt">提示层</button>
    		<button οnclick="common(5)" class="bt">墨绿深蓝风</button>
    </div>
    <div class="conten">
    		<button οnclick="common(6)" class="bt">捕获页</button>
    		<button οnclick="common(7)" class="bt">页面层</button>
    		<button οnclick="common(8)" class="bt">自定页</button>
    		<button οnclick="common(9)" class="bt" >tips层</button>
    		<button οnclick="common(10)" class="bt">iframe层</button>
    </div>
    <div class="conten">
    		<button οnclick="common(11)" class="bt">iframe窗</button>
    		<button οnclick="common(12)" class="bt">加载层</button>
    		<button οnclick="common(13)" class="bt">loading层</button>
    		<button οnclick="common(14)" class="bt">小tips</button>
    		<button οnclick="common(15)" class="bt">prompt层</button>
    </div>
    <div class="conten">
    		<button οnclick="common(16)" class="bt">tap层</button>
    		<button οnclick="common(17)" class="bt">相册层</button>
    </div>
    <div class=" layer_notice">傲不可长,欲不可纵,乐不可极,志不可满。</div>
    <div id="layer-photos-demo" class="layer-photos-demo">
      <img layer-pid="图片id,可以不写" layer-src="img/1.jpg" src="img/11.jpg" alt="图片名">
      <img layer-pid="图片id,可以不写" layer-src="img/2.jpg" src="img/22.jpg" alt="图片名">
      <img layer-pid="图片id,可以不写" layer-src="img/4.jpg" src="img/44.jpg" alt="图片名">
      <img layer-pid="图片id,可以不写" layer-src="img/5.jpg" src="img/55.jpg" alt="图片名">
      <img layer-pid="图片id,可以不写" layer-src="img/7.jpg" src="img/77.jpg" alt="图片名">
    </div>
    <script>
    function common(n){
    	    if(n==1){       
            //layer.alert(content, options, yes) - 普通信息框
    				layer.alert('有了回调', {title:'提示'},function(index){
    				   layer.alert('加了个图标', {icon: 1},function(index){
    				   	  layer.alert('只想简单的提示',function(index){
    				   	  	layer.close(index);//没有close就需要手动关闭
    				   	  });
    				   });
    				});       
    	    }else if(n==2){
    	    	//图标
    	    layer.alert('图标0', {icon: 0},function(index){
    				layer.alert('图标'+index, {icon: 1},function(index){
    					layer.alert('图标'+index, {icon: 2},function(index){
    						layer.alert('图标'+index, {icon: 3},function(index){
    							layer.alert('图标'+index, {icon: 4},function(index){
    								layer.alert('图标'+index, {icon: 5},function(index){
    									layer.alert('图标'+index, {icon: 6},function(index){
    										layer.close(index);
    									})
    								})
    							})
    						})
    					})
    				})
    			})
    	    }else if(n==3){
    	    	//layer.confirm(content, options, yes, cancel) - 询问框
    				layer.confirm('您是如何看待前端开发?', {
    				     btn: ['重要','奇葩'], //按钮
    				     icon: 3, 
    				     title:'提示'
    				    }, function(){
    				         layer.msg('的确很重要', {icon: 1});
    			    	}, function(){
    				         layer.msg('也可以这样', {
    				             time: 20000, //20s后自动关闭
    				             btn: ['明白了', '知道了']
    				         });
    				});
    	    }else if(n==4){
    	    	//layer.msg(content, options, end) - 提示框,3秒后自动消失
    				layer.msg('玩命提示中',{
    					    icon: 1,
    					    time: 2000 //2秒关闭(如果不配置,默认是3秒)
    					   }, function(){
    					     layer.msg('呵呵');
    				});
    	    }else if(n==5){
    	    	//墨绿深蓝风
    				layer.alert('墨绿风格,点击确认看深蓝', {
    				   skin: 'layui-layer-molv', //样式类名
    				   closeBtn: 0//layer提供了两种风格的关闭按钮
    				}, function(){
    				  layer.alert('深蓝style', {
    				     skin: 'layui-layer-lan',
    				     closeBtn: 0,//layer提供了两种风格的关闭按钮
    				     anim: 4 //动画类型
    				  });
    				});
    	    }else if(n==6){
    	    	//捕获页
    				layer.open({
    				  type: 1,
    				  shade: false,
    				  area: ['420px', '240px'], //宽高
    				  title: false, //不显示标题
    				  content: $('.layer_notice'), //捕获的元素
    				  cancel: function(){
    				    layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {
    				    	    time: 5000, 
    				    	    icon:6
    				    });
    				  }
    				});
    	    }else if(n==7){
    	    	//页面层
    				layer.open({
    				  type: 1,
    				  skin: 'layui-layer-rim', //加上边框
    				  area: ['420px', '240px'], //宽高
    				  content: 'html内容'
    				});
    	    }else if(n==8){
    	    	//自定页
    				layer.open({
    				  type: 1,
    				  skin: 'layui-layer-demo', //样式类名
    				  closeBtn: 0, //不显示关闭按钮
    				  anim: 2,//anim可支持的动画类型有0-6
    				  shadeClose: true, //开启遮罩关闭
    				  content: '内容'
    				});
    	    }else if(n==9){
    	    	//tips层
    				layer.tips('Hi,我是tips', '.layer_notice',{tips:2});
    	    }else if(n==10){
    	    	//iframe层
    				layer.open({
    				  type: 2,
    				  title: 'layer mobile页',
    				  shadeClose: true,//是否点击遮罩关闭
    				  shade:[0.8,'#393D49'],//遮罩
    				  area: ['380px', '90%'],
    				  content: 'http://blog.csdn.net/qq_27626333/article/details/53674829' //iframe的url
    				}); 
    	    }else if(n==11){
    	    	//iframe窗
    				layer.open({
    				  type: 2,
    				  title: false,
    				  closeBtn: 0, //不显示关闭按钮
    				  shade: [0],//不显示遮罩
    				  area: ['340px', '215px'],
    				  offset: 'rb', //右下角弹出
    				  time: 2000, //2秒后自动关闭
    				  anim: 2,
    				  content: ['http://blog.csdn.net/qq_27626333/article/details/53674829', 'no'], //iframe的url,no代表不显示滚动条
    				  end: function(){ //此处用于演示
    				layer.open({
    				  type: 2,
    				  title: '很多时候,我们想最大化看,比如像这个页面。',
    				  shadeClose: true,
    				  shade: false,
    				  maxmin: true, //开启最大化最小化按钮
    				  area: ['893px', '600px'],
    				  content: 'http://blog.csdn.net/qq_27626333/article/details/53674829'
    				    });
    				  }
    				});
    	    }else if(n==12){
    	    	//layer.load(icon, options) - 加载层
    				var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒 
    				//关闭
    				//layer.close(index);   
    	    }else if(n==13){
    	    	//loading层
    				var index = layer.load(1, {
    				              shade: [0.1,'#fff'],//0.1透明度的白色背景
    				              time:1000
    				            });
    	    }else if(n==14){
    	    	//小tips
    				layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '.layer_notice', {
    				  tips: [1, '#3595CC'],
    				  time: 4000
    				});
    	    }else if(n==15){
    	    	//layer.prompt(options, yes) - 输入层
    	    	//formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
    			  //value: '', //初始时的值,默认空字符
    			  //maxlength: 140, //可输入文本的最大长度,默认500
    			  //yes携带value表单值、index索引、elem表单元素
    				layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
    				  layer.close(index);
    				  layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
    				     layer.close(index);
    				     layer.msg('演示完毕!您的口令:'+ pass +'您最后写下了:'+text);
    				  });
    				});
    	    }else if(n==16){
    	    	//layer.tab(options) - tab层
    				layer.tab({
    				  area: ['600px', '300px'],
    				  tab: [{
    				    title: 'TAB1', 
    				    content: '内容1'
    				  }, {
    				    title: 'TAB2', 
    				    content: '内容2'
    				  }, {
    				    title: 'TAB3', 
    				    content: '内容3'
    				  }]
    				});
    	    }else if(n==17){
    	    	//相册层
    				layer.photos({
    				  photos: '#layer-photos-demo',
    				  anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
    				}); 
    	    }
    }
    </script>
    </body>
    </html>


    
    
    展开全文
  • 一、使用时,请把文件夹layer整个放置在您站点的任何一个目录,只需引入layer.js即可,除jQuery外,其它文件无需再引入。 二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径,您可以通过layer...
  • layer.config({extend: 'extend/layer.ext.js'}); layer.prompt({ formType: 0, value: '', title: '请输入App名字' }, function(value,index){ alert(value); layer.close(index); }); ...
  • layer.js和layui.js的学习

    2021-05-31 10:35:06
    官网: layui:... ... ... layer: https://www.layui.com/doc/modules/layer.html https://layer.layui.com/ 例子: <!DOCTYPE html> <html lang="en"> &..

    官网:

    layui:https://www.layui.com/doc/element/timeline.html

    https://www.layui.com/demo/

    https://www.layui.com/doc/

     

    layer:

    https://www.layui.com/doc/modules/layer.html

    https://layer.layui.com/

     

    例子:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="../jquery-2.1.1/jquery.min.js"></script>
      <script src="layer/layer.js"></script>
      <script src="layui/layui.js"></script>
      <link rel="stylesheet" href="layui/css/layui.css">
      
    </head>
    
    <body>
      <ul class="layui-timeline">
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月18日</h3>
            <p>
              layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
              <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
              <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
            </p>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月16日</h3>
            <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
            <ul>
              <li>《登高》</li>
              <li>《茅屋为秋风所破歌》</li>
            </ul>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月15日</h3>
            <p>
              中国人民抗日战争胜利72周年
              <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
              <br>铭记、感恩
              <br>所有为中华民族浴血奋战的英雄将士
              <br>永垂不朽
            </p>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">过去</div>
          </div>
        </li>
      </ul>
            
      <script>
        layer.msg("hello");
    
        layui.use('layer', function () {
          var layer = layui.layer;
          layer.msg("hello");
        })
      </script>
    </body>
    
    </html>

    展开全文
  • layer.js 方法

    千次阅读 2018-03-25 14:02:44
    内置方法layer.config(options) - 初始化全局配置这是一个可以重要也可以不重要的方法,重要的是,它的权利真的很大,尤其是在模块化加载layer时,你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块...
  • ![图片说明](https://img-ask.csdn.net/upload/202005/12/1589273796_807271.jpg) ![图片说明]... 看着视频敲的,不知道为什么会报错 ...2.引入顺序在layer.js之前
  • 出现的问题:layer.open is not a function 解决方案: 首先检查jquery和layer的版本 我的juqery的版本: /*! jQuery v1.7.2 jquery.com | jquery.org/license */ 而我的...
  • layer.js的open使用

    千次阅读 2020-03-17 17:39:22
    最近使用页面弹框,觉得layer.js的弹框功能比较强大而且很好用 以此记录下来 1.layer官网:http://layer.layui.com/ 在这里下载需要的js 2、在引用的前端页面加载layer.js的路径 layer.open({ type: 1, //1...
  • Layer弹窗感觉还是挺好用的,就是父子界面间的交互不是很清楚。看了不少文档自己又试了挺久,算是找到了一个比较好的方法,记录一下吧。 基本原理: 获取弹出层实体,通过向方法传递参数的形式去弱化父子关系。 基本...
  • layer.confirm弹出框,当你点击第一个按钮的时候,这个弹出层不会关闭,也是给一些小伙伴带来了一些困扰, 下面分享两个解决方案: ①可以将第一个按钮的回调函数传一个index,然后使用layer.close(“index”)就可以...
  • layer.js如何引入

    千次阅读 2019-11-02 07:26:46
    先要引入jquery,然后代码: <link rel="stylesheet" href="/static/layui-v2.5.5/layui/...script src="/static/layui-v2.5.5/layui/layui.all.js"></script> 这里的 layui.all.js ,也可以换成layui...
  • CanvasLayer.js

    2021-08-13 17:43:59
    CanvasLayer.js
  • layer.css web弹层组件

    2019-07-06 12:56:27
    layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js
  • layer.js实现弹出相册效果

    千次阅读 2018-12-28 13:32:01
    有时候,前端开发需要点击图片实现弹出相册效果(图片查看器),可以放大预览图片并且左右翻页切换,layer.js可以很轻松实现(layer.photos(options))。 实现步骤 1、导入相关layer插件 页面上只需要引入...
  • layer.js确认框

    2020-03-17 15:56:52
    layer.js的确认框写法: 前提是在页面html里加载layer.js的路径 <script src="./../../../static/plugins/layer/layer.js"></script> layer.confirm('确定要一键部署?', {icon: 3, title: '系统...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,762
精华内容 31,104
关键字:

layer.js