由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照实际需求来选择。
1、 作为独立组件使用
如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。 通过script标签引入layer.js后,直接用即可。
2、layui模块化使用
如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js 通过layui.use(‘layer’, callback)加载模块
作为独立组件使用
引入好layer.js后,直接用即可
layer.msg(‘hello’);
在 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的不同而不同。譬如:
codelayui.code /!如果是页面层/
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
});