Layer弹层组件

前几天了解到这个不错的弹层插件,样式好看,用起来也方便。喜欢的人看完我的博客也可以看官方网站哦:http://www.layui.com

在这个官方网站里有关于它的基础参数:

type(基本层类型),title(标题),content(内容),skin(样式类名)等等好多,

还有一些方法:

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

layer.alert(content, options, yes) - 普通信息框,

layer.confirm(content, options, yes, cancel) - 询问框,

layer.msg(content, options, end) - 提示框,

layer.load(icon, options) - 加载层

在使用layer,你只要在html代码里加入jquery.js和layer.js就可以调用它啦!

调用方法实例演示网站为:http://layer.layui.com/

在这里用自己敲的一个实例给你们看看吧:

html代码

当你点击按钮后,就会弹出图片页面框:(图片滑动弹出,背景变灰)

效果图

最后用喜欢官网的一句话,我就用它来结尾吧:

合理地设定基础参数,合理地选择内置方法,合理的心态,合理地阅读,只要一切都在合理的前提下,你才会感知到layer许许多多令人愉悦的地方,她真的是否如你所愿,取决于你对她了解的深远。愿layer能给你的web开发带来一段美妙的旅程。别忘了在线调试。

(原文写于2017.8.19)

原文发布于微信公众号 - 程序员的碎碎念(gh_53e607dd4782)

原文发表时间:2017-09-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

Unix Pipes to Javascript Pipes

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 Unix Pipes Unix管道扫描稿 ? 简单样例: $ ne...

18510
来自专栏闻道于事

商城项目回顾整理(一)前台页面布局

登录页面: 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 ...

2963
来自专栏Debian社区

Debian 环境下有趣的命令

安装  $ sudo apt-get install sl 运行  $ /usr/games/sl

1545
来自专栏程序员的碎碎念

利用Ajax提升网页渲染速度——以Highcharts为例

先来看看速度优化对比(这里用了 Django的 DebugToolbar库来查看状态)

1103
来自专栏知晓程序

开发 | 技术高人如何开发小程序?他们用这套方法

972
来自专栏Keegan小钢

Android项目重构之路:界面篇

在前一篇文章《Android项目重构之路:架构篇》中已经简单说明了项目的架构,将项目分为了四个层级:模型层、接口层、核心层、界面层。其中,最上层的界面,是变化最...

1134
来自专栏代码GG之家

Android 关机对话框概率没有阴影故障分析

Android 关机对话框概率没有阴影故障分析 ? 以玩的心态,做着感兴趣的事情而已,别无其他杂念。 android recent key长按事件弹起触发最近列...

2316
来自专栏知道一点点

Angularjs快速入门(二)

说说上一节的例子,$scope 我们没有创建这个对象,直接绑定就能获取里面的对象,这种风格遵循了一种叫迪米特法则的设计模式。

1201
来自专栏coding for love

在线商城项目06-商品列表页前端逻辑实现

step1:价格过滤列表的字段显示。 这里,我们不做太复杂的逻辑,这些过滤字段不从后端请求,也不由用户输入,而是在前端写死。在GoodsList.vue中进行...

1091
来自专栏大数据挖掘DT机器学习

数据挖掘工程师:如何通过百度地图API抓取建筑物周边位置、房价信息

1.需求描述 对于数据挖掘工程师来说,有时候需要抓取地理位置信息,比如统计房子周边基础设施信息,比如医院、公交车站、写字楼、地铁站、商场等,一般的爬虫可以采用...

4829

扫码关注云+社区