小巧强大的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 相关文章推荐
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
js实现产品缩略图效果
Mar 10 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
JavaScript 中的事件教程
2007/04/05 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
js运动应用实例解析
2015/12/28 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
使用python为mysql实现restful接口
2018/01/05 Python
python科学计算之narray对象用法
2019/11/25 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
企业演讲稿范文
2013/12/28 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
会计毕业生自荐书
2014/06/12 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript