分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Js组件layer的使用

发布时间:2023-09-06 02:23责任编辑:赖小花关键词:组件

作为独立组件使用 layer

引入好layer.js后,直接用即可<script src="layer.js"></script><script>layer.msg(‘hello‘); </script>

在 layui 中使用 layer

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

layer.open(options) - 原始核心方法

/!* 如果是页面层 */layer.open({ ?type: 1, // 层类型;类型:Number,默认:0;layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
 ?content: ‘传入任意的文本或html‘ //这里content是一个普通的String});layer.open({ ?type: 1,
?area:[‘500px‘, ‘300px‘], // 宽和高 ?content: $(‘#id‘) //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响});//Ajax获取$.post(‘url‘, {}, function(str){ ?layer.open({ ???type: 1,
???skin:‘‘, //样式类名。类型:String,默认:‘‘;skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子
 ???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}); ?

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

Js组件layer的使用

原文地址:https://www.cnblogs.com/shengulong/p/10009021.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved