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 - 引入好layer.js后,直接用即可
- <script src="layer.js"></script>
- <script>
- layer.msg('hello');
- </script>
复制代码2、在layui中运用layer - layui.use('layer', function(){
- var layer = layui.layer;
- layer.msg('hello');
- });
复制代码除了上面有所差别,别的都完全一致。 基础参数: 我们提到的基础参数主要指挪用要领时用到的设置项,如: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的差别而差别。 - /!*
- 假如是页面层
- */
- layer.open({
- type: 1,
- content: '传入恣意的文本或html' //这里content是一个平常的String
- });
- layer.open({
- type: 1,
- content: $('#id') //这里content是一个DOM,注重:最好该元素要存放在body最外层,不然大概被别的的相对元素所影响
- });
- //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
- });
复制代码skin - 款式类名 范例:String,默许:'' skin不仅许可你传入layer内置的款式class名,还能够传入您自定义的class名。这是一个很好的切入点,意味着你能够借助skin轻松完成差别的作风定制。 现在layer内置的skin有:layui-layer-lanlayui-layer-molv,将来我们还会挑选性地内置更多,但更引荐您本身来定义。以下是一个自定义作风的简朴例子 - //单个运用
- layer.open({
- skin: 'demo-class'
- });
- //全局运用。即一切弹出层都默许采纳,然则单个设置skin的优先级更高
- layer.config({
- skin: 'demo-class'
- })
- //CSS
- body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
- body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
- body .demo-class .layui-layer-btn a{background:#333;}
- body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
- …
- 加上body是为了保证优先级。你能够借助Chrome调试东西,定义更多款式掌握层更多的地区。
复制代码area - 宽高 范例:String/Array,默许:'auto' 在默许状态下,layer是宽高都自适应的,但当你只想定义宽度时,你能够area: '500px',高度仍然是自适应的。当你宽高都要定义时,你能够area: ['500px', '300px'] offset - 坐标
范例:String/Array,默许:垂直程度居中
icon - 图标。信息框和加载层的私有参数 范例:Number,默许:-1(信息框)/0(加载层) 信息框默许不显现图标。当你想显现图标时,默许皮肤能够传入0-6假如是加载层,能够传入0-2。如: - //eg1
- layer.alert('酷了', {icon: 1});
- //eg2
- layer.msg('不高兴。。', {icon: 5});
- //eg3
- layer.load(1); //作风1的加载
复制代码
|