jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
在线实例
实例预览 layer实例DEMO演示-jQuery弹出层插件
实例预览 layer实例测试
参考手册
帮助文档 layer API 帮助文档
引入文件
- <link rel="stylesheet" href="layer.css" media="all">
- <script type="text/javascript" src="jquery.min.js"></script>
- <script type="text/javascript" src="layer.js"></script>
使用方法
- <a href="javascript:;" onclick="test();">点我弹窗</a>
- <script>
- function test() {
- //在这里面输入任何合法的js语句
- layer.open({
- type: 1,
- //page层
- area: ['500px', '300px'],
- title: '你好,layer。',
- shade: 0.6,
- //遮罩透明度
- moveType: 1,
- //拖拽风格,0是默认,1是传统拖动
- shift: 1,
- //0-6的动画形式,-1不开启
- content: '<div style="padding:50px;">这是一个非常普通的页面层(type:1),传入了自定义的html</div>'
- });
- }
- </script>
jQuery Layer 弹层组件的更多相关文章
- 学习layer弹层组件移动版
layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层
- Layer弹层组件 二次扩展,项目中直接使用。
/************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...
- HTML5 本地存储+layer弹层组件制作记事本
什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- layerweb弹层组件(SSH框架下)
action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- React15.6.0实现Modal弹层组件
代码地址如下:http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象 了解React. 使用过we ...
- jQuery layer弹出层插件 http://layer.layui.com/直接上官网学
在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...
- layer弹层基本参数初尝试
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- PC端和移动端地址适配
判断当前页面的打开方式是pc还是移动设备,如果是移动设备,跳转到对应移到端网站的方法: 方法一.还是用@media screen 思路:css使用媒体查询,当屏幕小于760px时,使某个元素的样式发生 ...
- 为什么很多网站的表单提交按钮都是用<a>标签
之 前看过一些文章,说是用a标签来代替submit按钮更好一些,因为submit按钮在IE6下会有一些兼容的问题,不好统一,而且input的行高在各 浏览器参差不齐,还不能用line-height控制 ...
- Codeforces Round #277(Div. 2) (A Calculating Function, B OR in Matrix, C Palindrome Transformation)
#include<iostream> #include<cstring> #include<cstdio> /* 题意:计算f(n) = -1 + 2 -3 +4. ...
- java中自动装箱的问题
package wrapper; public class WrapperDemo { public static void main(String[] args) { Integer a=new I ...
- Anliven - 解决问题的一些方法
How to resolve the problem? 获取基本的相关信息(后续处理问题的基础) 在怎样的背景环境下?发生了怎样的问题? 如果无法清楚地辨别或陈述问题的基本信息,那么,此时要面对的将 ...
- JAVA之IO文件读写
IO概述: IO(Input output)流 作用:IO流用来处理设备之间的数据传输 ...
- 老鸟谈谈JAVA EE的学习
老鸟谈谈JAVA EE的学习 因为出差和项目的原因,有将近一个月的时间没有更新博客了,今天终于得闲,和兄弟们分享一下JAVA EE的学习心得.书中带过,直入主题,下面我们首先看看什么是JAVA EE. ...
- [New Portal]Windows Azure Virtual Machine (23) 使用Storage Space,提高Virtual Machine磁盘的IOPS
<Windows Azure Platform 系列文章目录> 注意:如果使用Azure Virtual Machine,虚拟机所在的存储账号建议使用Local Redundant.不建议 ...
- nodejs学习笔记二——链接mongodb
a.安装mongoose库用来链接mongodb数据库 安装mongodb数据库参考mongodb安装 前言(怨言) 本来是想安装mongodb库来链接mongodb的,命令行到nodejs工程目录: ...
- nagios的nrpe的check_command配置优化
问题处理了两个小时,MMD,各种问题: 先是出现了check_load的时候说参数错误. 然后我就希望 在nagios客户端获取到命令日志 在这篇:NREP将日志放入message中 的引导下终于解决 ...