文档章节

jquery layer弹窗弹层插件 小巧强大

深圳大道
 深圳大道
发布于 2016/12/29 15:38
字数 660
阅读 14
收藏 0
/*
先去官网下载最新的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
    });
});

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/39339733

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
企业级弹窗 Layx v2.5.2 常规更新

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 Layx和Layer的区别 Layer 是贤心基于JQuery开发的优秀前端框架,基本实现了我们弹窗需要的常规功能。 Layx是在Layer无法满足企业级系...

百小僧
2018/09/29
2.4K
23
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0
8 款实用的 jQuery 插件及源码

jQuery的确是一款非常轻巧强大的JS框架,相信每一位Web开发者都非常喜欢。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插件...

yykj
2013/11/13
733
0
15款ajax特效,针对Lightbox和Modal Dialog

运用Lightbox和Modal Dialog可以很方便地在浏览器中展示内容,而无需重载整个页面,有了Lightbox就不必再使用浏览器弹窗了。Lightbox正愈来愈广泛地应用于媒体、网页、邮件、表格等元素的展示...

小编辑
2010/11/22
4.4K
8
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C 语言 二级指针的使用

#include <stdio.h>#include <stdlib.h>typedef struct node Node;struct node {int data;struct node* next;struct node* prev;};Node head;Node* insert(Node......

小张525
58分钟前
3
0
【大数据技术】——Hadoop(1)

什么是大数据 基本概念 《数据处理》 在互联网技术发展到现今阶段,大量日常、工作等事务产生的数据都已经信息化,人类产生的数据量相比以前有了爆炸式的增长,以前的传统的数据处理技术已经...

须臾之余
今天
9
0
比特币从地址逆向计算私钥

区块链 区块链简介 说到比特币,就不得不提区块链。那什么是区块链呢? 区块链本质是一个数据集,只不过数据的组织采用了比较特殊的方式,就是把数据拆分为一块一块的小数据集。 为什么要进行...

trayvon
今天
2
0
TypeScript……真香

写前端或者用 node 写命令行小工具一直采用的 es6 的语法,对于 TypeScript 则是秉持敬而远之的态度,毕竟团队中多推广一门语言所需要花费的精力都是让人望而却步的。所以对于 JavaScript 的...

郁也风
今天
3
0
shell基本案例

1、自定义rm linux系统的rm命令太危险,一不小心就会删除掉系统文件。 写一个shell脚本来替换系统的rm命令,要求当删除一个文件或者目录时,都要做一个备份,然后再删除。下面分两种情况,做...

寰宇01
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部