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> ...
随机推荐
- SQL Pass北京举办第11次线下活动,欢迎报名(本次活动特别邀请了来自微软总部Xin Jin博士)
活动主题: 探讨SQL Server 2014与Fusion IO在SQL Server中的应用 地点:北京微软(中国)有限公司[望京利星行],三层308室 时间:2013年 10 月19日 13:3 ...
- Introduction of Open CASCADE Foundation Classes
Open CASCADE Foundation Classes Open CASCADE基础类 eryar@163.com 一.简介 1. 基础类概述 Foundation Classes Overv ...
- php的mysql\mysqli\PDO(一)mysql
原文链接:http://www.orlion.ga/1140/ 工作中数据库的操作都被封装好了,这些怎么用的都快忘了干脆写篇博客重新复习下,以后要是再忘记了可以看这篇文章. PHP 5.5.0 起已废 ...
- android NDK 生成so 文件流程-ecplice
1:生成jni目录 首先说一句网上,大部分博客这么写的:打开控制台,进入项目目录,运行javah -classpath bin/classes -d jni com.example.hellojni. ...
- Myeclipse 操作数据库
步骤1:通过MyEclipse中的window->show View->other 调出.DB浏览器,和 SQL Results 步骤2. 可以右键单击空白处,选择new,创建一个新的DB ...
- 初始化的一些问题(Vector使用)
import java.util.Vector; import java.util.Iterator; import java.util.Arrays; import java.util.ArrayL ...
- Prim算法(一)之 C语言详解
本章介绍普里姆算法.和以往一样,本文会先对普里姆算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里 ...
- 各种排序算法的分析及java实现
排序一直以来都是让我很头疼的事,以前上<数据结构>打酱油去了,整个学期下来才勉强能写出个冒泡排序.由于下半年要准备工作了,也知道排序算法的重要性(据说是面试必问的知识点),所以又花了点时间 ...
- 轻松自动化---selenium-webdriver(python) (十二)
本节重点: l 键盘按键用法 l 键盘组合键用法 l send_keys() 输入中文运行报错问题 键盘按键键用法: #coding=utf-8 from selenium import webdri ...
- Schema – 模块化,响应式的前端开发框架
Schema 是一个模块化的,响应式的前端框架,方便,快捷地帮助您迅速启动你的 Web 项目.Schema 配备完整的创建多个视图的能力.从桌面显示器到移动设备,它的12列网格提供强大的灵活性. Sc ...