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

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

Js组件layer的使用的更多相关文章

  1. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  2. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  3. layer.js中layer.tips

    <script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...

  4. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  5. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  6. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  8. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  9. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

随机推荐

  1. JQuery - 特殊字符转义(Uncaught Error: Syntax error, unrecognized expression:的处理)

    今天在改一个jQuery老项目时候,发现标签上的data-id中含有特殊字符时候报错Uncaught Error: Syntax error, unrecognized expression,如何处理 ...

  2. http学习笔记1

    通讯的条件 学前小故事 通过这个故事,我们来理解两台电脑之间的通信,必须具备什么样的条件? 有一天啊,这个小明和小强,一个在山的这头放牛,一个在山的那头割草.但是,由于无聊,这个小明就像找对面的小强聊 ...

  3. Good Bye 2015 F - New Year and Cleaning

    F - New Year and Cleaning 这题简直是丧心病狂折磨王.. 思路:容易想到这样一个转换,把整个矩形一起移动,矩形移出去的时候相当于一行或者一列. 为了优化找到下一个消去的点,我先 ...

  4. Codeforces Round #286 (Div. 1) D. Mr. Kitayuta's Colorful Graph

    D - Mr. Kitayuta's Colorful Graph 思路:我是暴力搞过去没有将答案离线,感觉将答案的离线的方法很巧妙.. 对于一个不大于sqrt(n) 的块,我们n^2暴力枚举, 对于 ...

  5. 《java虚拟机》----垃圾收集、内存分配

    No1: 程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭:栈中的栈帧随着方法的进入和退出而有条不紊的执行着出栈和入栈操作.每一个栈帧中分配多少内存基本上市在类结构确定下来时就已知的,因 ...

  6. Ubuntu下环境变量该写进哪个文件里

    Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登录到系统的用户都要读取的系统变量,而用户级的环境变量则是该用户使用系统时加载的环境变量. 所以管理环境变量的文件也分为系统级和用户级的. ...

  7. 【BZOJ 3747】 3747: [POI2015]Kinoman (线段树)

    3747: [POI2015]Kinoman Time Limit: 60 Sec  Memory Limit: 128 MBSubmit: 830  Solved: 338 Description ...

  8. 「LOJ6482」LJJ爱数数

    「LOJ6482」LJJ爱数数 解题思路 : 打表发现两个数 \(a, b\) 合法的充要条件是(我不管,我就是打表过的): \[ a + b = \text{gcd}(a, b)^2 \] 设 \( ...

  9. 莫队p2 【bzoj3809】Gty的二逼妹子序列

    发现一篇已经够长了...所以就放在这里吧... http://hzwer.com/5749.html ↑依然是看大牛题解过的   袜子那道题太简单了.... 然后被这道题超时卡了一段时间....... ...

  10. 【DFS】BZOJ3522-[Poi2014]Hotel

    [题目大意] 给出一棵树,求三个节点使得它们两两之间的距离相等,问共有多少种可能性? [思路] 显然,这三个节点是关于一个中心点对称地辐射出去的. 枚举中心点,往它的各个子树跑Dfs.tmp[i]表示 ...