jquery layer弹窗弹层插件 小巧强大
- /*
- 先去官网下载最新的js http://sentsin.com/jquery/layer/
- ①引用jquery
- ②引用layer.min.js
- */
- 触发弹层的事件可自由绑定,如:
- $('#id').on('click', function(){
- layer.msg('test');
- });
- 下面主要贴出上述例子的调用代码:
- 【信息框】:
- layer.alert('白菜级别前端攻城师贤心', 8); //风格一
- layer.msg('前端攻城师贤心'); //风格二
- //当然,远远不止这两种风格。
- 【询问框】:
- $.layer({
- shade: [0],
- area: ['auto','auto'],
- dialog: {
- msg: '您是如何看待前端开发?',
- btns: 2,
- type: 4,
- btn: ['重要','奇葩'],
- yes: function(){
- layer.msg('重要', 1, 1);
- }, no: function(){
- layer.msg('奇葩', 1, 13);
- }
- }
- });
- //还可用layer.confirm()快捷调用
- 【页面层一】
- $.layer({
- type: 1,
- shade: [0],
- area: ['auto', 'auto'],
- title: false,
- border: [0],
- page: {dom : '.layer_notice'}
- });
- 【页面层二】
- var pageii = $.layer({
- type: 1,
- title: false,
- area: ['auto', 'auto'],
- border: [0], //去掉默认边框
- shade: [0], //去掉遮罩
- closeBtn: [0, false], //去掉默认关闭按钮
- shift: 'left', //从左动画弹出
- page: {
- html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我从左边来,我自定了风 格。</p><button id="pagebtn" class="btns" onclick="">关闭< /button></div>'
- }
- });
- //自设关闭
- $('#pagebtn').on('click', function(){
- layer.close(pageii);
- });
- 【iframe层一】
- $.layer({
- type: 2,
- shadeClose: true,
- title: false,
- closeBtn: [0, false],
- shade: [0.8, '#000'],
- border: [0],
- offset: ['20px',''],
- area: ['1000px', ($(window).height() - 50) +'px'],
- iframe: {src: 'http://f2e.sentsin.com/chat'}
- });
- 【iframe层二】
- layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, {
- time: 5,
- maxWidth: 260
- });
- $.layer({
- type: 2,
- closeBtn: false,
- shadeClose: true,
- shade: [0.1, '#fff'],
- border: [0],
- time: 5,
- iframe: {
- src: 'test/guodu.html'
- },
- title: false,
- area: ['300px','250px'],
- shift: 'right-bottom',
- end: function(){
- $.layer({
- type : 2,
- title: '贤心博客 - sentsin.com',
- shadeClose: true,
- maxmin: true,
- fix : false,
- area: ['1024px', 500],
- iframe: {
- src : 'http://sentsin.com/'
- }
- });
- }
- });
- 【加载层一】
- layer.load(3);
- 【加载层二】
- layer.load('加载带文字', 3);
- 【tips层一】
- layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
- style: ['background-color:#78BA32; color:#fff', '#78BA32'],
- maxWidth:185,
- time: 3,
- closeBtn:[0, true]
- });
- 【tips层二】
- layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});
- 【输入/文件层】
- //普通文本
- layer.prompt({title: '您的名字?'}, function(name){
- alert(name);
- });
- //密码文本
- layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){
- alert(pass);
- });
- //文件上传
- layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){
- alert(file);
- });
- //多行文本
- layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){
- alert(val);
- });
- 【tab层】
- layer.tab({
- area: ['1000px', '500px'],
- data: [
- {title: 'Say', content:'Hi,Main'},
- {title: '无题', content:'支持html传入'}
- ]
- });
- 【相册层】
- //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json
- var conf = {};
- $.getJSON('ajax地址', {}, function(json){
- conf.photoJSON = json; //保存json,以便下次直接读取内存数据
- layer.photos({
- html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭',
- json: json
- });
- });
jquery layer弹窗弹层插件 小巧强大的更多相关文章
- jquery layer弹窗弹层插件 (转)
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- layer弹层插件
// 使用前需要引入jquery的支持,链接如下: https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js ...
- jQuery Layer mobile 弹出层
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
- 借用layer让弹层不限制在iframe内部
使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...
- Layer.js弹层的一些简单的使用
//-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----contentMsg 里面是可以传入 HTML代码的 top.layer.alert(contentMsg ...
- jQuery layer[页面弹出框]
常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...
- layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理
解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...
- 【Javascript】好用的js弹层插件,layerUI
官网:layerUI 中文手册:layerAPI
- jquery layer插件弹出弹层 结构紧凑,功能强大
/* 去官方网站下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 事件触发炸弹层可以自由绑定,例如: $('# ...
随机推荐
- oracle 之关键字exists
-----------------------------------------------------------------------SQL中EXISTS的用法---------------- ...
- Repeater分页
void BindData() { PagedDataSource pds = new PagedDataSource(); ...
- Linux物理内存相关数据结构
节点:pg_data_t typedef struct pglist_data { zone_t node_zones[MAX_NR_ZONES]; zonelist_t node_zonelists ...
- 数据结构《9》----Threaded Binary Tree 线索二叉树
对于任意一棵节点数为 n 的二叉树,NULL 指针的数目为 n+1 , 线索树就是利用这些 "浪费" 了的指针的数据结构. Definition: "A binary ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- du -sh 目录名称 查看目录大小
du -sh 目录名称 查看目录大小 df -h 查看磁盘使用情况
- ecpilise引入Maven项目目录不正常,无JRE,无Maven Dependencies
原因是我的eclipse默认open perspective是java ee,改成java就恢复正常了.
- IOS中怎么使用微软雅黑字体
http://www.cnblogs.com/GnagWang/archive/2011/09/14/2176266.html
- BZOJ3261 最大异或和 (可持久化Trie)
; len=; var x,y,z,n,m,tot,lx,i:longint; sum:..maxn] of longint; rt:..maxn] of longint; time,l,r:..ma ...
- [图论]Dijkstra 算法小结
Dijkstra 算法小结 By Wine93 2013.11 1. Dijkstra 算法相关介绍 算法阐述:Dijkstra是解决单源最短路径的算法,它可以在O(n^2)内计算出源点(s)到图中 ...