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


Posted in Javascript onDecember 06, 2015

先去官网下载最新的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 
  }); 
});
Javascript 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 #Javascript
javascript字符串函数汇总
Dec 06 #Javascript
win7下安装配置node.js+express开发环境
Dec 06 #Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 #Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 #Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 #Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 #Javascript
You might like
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
js二级地域选择的实现方法
2013/06/17 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python实现学生信息管理系统
2020/04/05 Python
带你认识Django
2019/01/15 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python与C/C++的相互调用案例
2021/03/04 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
同学会邀请书大全
2014/01/12 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL