弹出层组件文档-layui.layer

在写代码的过程中,难免会用到插件的使用,而这个layui的插件也提到很多次了,应该不陌
生了吧,而这一次就说说layui里面的弹出层。
既然说到弹出层,那么想到的就是用户操作如果出现错误的话就会出现这么一个提示框,当然也不只是用户使用过程中操作错误的时候会出现,其实当需要填的内容用户没有填写完整的时候也会弹出一个提示框,或者用户操作错误的时候弹出一个带有警告意义的提示框,至于里面的提示内容就是程序员的事了。
如果使用layui插件的提示框,那么样式上肯定与其他的大不相同。而想使用这个插件里面的提示框样式就得要引用这里的插件,并且还需要加载才能够使用,而且凡是用到这里的layui的模块的都需要引用它的插件的,引用之后一定要还记得加载你需要的模块,不然引用了插件也没有用,因为根本就没有显示出样式来。
而想要加载弹出层组件的话,就需要 加载模块名称:layer 这个模块了。写法就是这样的:

layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg('hello');
 });

Msg里面的就是提示的内容,想些什么就写什么,但是得符合你写这个代码的意境。这个意境就是如果是新增的话,那么可以写上 新增成功,或者 新增失败 等这些符合意境的提示语。总不可能是新增的就写个 删除成功 或者其他的吧。
写完上面那个,引用好layer.js就可以直接使用了。快捷。
这个也是有个基础参数的,如:layui.open({content:””}) , layer,msg(“”,{time:3})等,其中的content跟那个time就是基础参数,它们都以键值的形式存在,而这个基础参数可以合理运用在任何的层类型当中。
比如layui.open({content:””})这个的效果是这样的:
在这里插入图片描述
使用layui插件有个 在线测试 的功能,就像图片上面的一样,在里面写上内容,点击 立即运行,就可以看得到弹出层的样式了。
layer中提供五种类型设置type基本层,可传入有这五种值:0,1,2,3,4,5。这五个值分别代表着:信息框,默认的;页面层;iframe层;加载层;tips层。
在layui文档里面是这样解释的:

/!*js
        如果是页面层
        */
        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
        });    
 这个应用到页面中的效果跟 在线调试 的一样的:

在这里插入图片描述
对比上面的两张图片的效果,下面这张图片有个绿色的打勾的样式,这是因为使用的是layer.alert弹出层,然后在里面写上icon:1的代码,就可以有图片中的样式了。

function Print() {
            layer.alert("修改成功!", { icon: 1, title: "提示" }, function (layerIndex) { layer.close(layerIndex); });
        }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值