作为独立组件使用 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. 深入理解 WordPress 数据库中的用户数据 wp_user

    WordPress 使用 wp_users 数据表存储用户的主要数据,该数据表结构类似于wp_posts 和 wp_comments 数据表,存储的是需要经常访问的用户数据,该数据表的结构以及该数据表 ...

  2. Hadoop案例(四)倒排索引(多job串联)与全局计数器

    一. 倒排索引(多job串联) 1. 需求分析 有大量的文本(文档.网页),需要建立搜索索引 xyg pingping xyg ss xyg ss a.txt xyg pingping xyg pin ...

  3. Hadoop(五)分布式集群中HDFS系统的各种角色

    NameNode 学习目标 理解 namenode 的工作机制尤其是元数据管理机制,以增强对 HDFS 工作原理的 理解,及培养 hadoop 集群运营中“性能调优”.“namenode”故障问题的分 ...

  4. phantomjs2.1 初体验

    上次看了一下scrapy1.1的新手指南 决定写个小爬虫实验一下 目标网站是http://www.dm5.com/manhua-huofengliaoyuan准备爬取漫画火凤燎原的已有章节,将图片保存 ...

  5. ref:ThinkPHP Builder.php SQL注入漏洞(<= 3.2.3)

    ThinkPHP Builder.php SQL注入漏洞(<= 3.2.3) ref:https://www.jianshu.com/p/18d06277161e TimeSHU 2018.04 ...

  6. 2017 计蒜之道 初赛 第五场 B. UCloud 的安全秘钥(简单)

    暴力. 暴力枚举$S$串的每一个长度为$m$的子串,排序判断即可. #include <iostream> #include <cstdio> #include <cst ...

  7. Jenkins多选项框使用

    多选框的使用场景还是挺多的,比如发布多个服务,或者选择哪些服务器 想要使用多选项,则需要安装插件extend choice parameter,然后在项目中配置参数化构建过程 配置完上面,我们就可以在 ...

  8. asp.net core结合Gitlab-CI实现自动化部署

    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.前言 在之前的文章中写过k8s+Jenkins+GitLab-自动化部署asp.net core项目 的topic,这次讲解一 ...

  9. String 字符串补0

    method1: 前提是你的长度已经确定!比如规定现实10位! - 优点: 不需要都是数字类型    String str_m =  "123X";  String str =&q ...

  10. 应用服务攻击工具clusterd

    应用服务攻击工具clusterd   clusterd是一款Python语言编写的开源应用服务攻击工具.该工具支持七种不同的应用服务平台,如JBoss.ColdFusion.WebLogic.Tomc ...