web弹层Layer组件下载,Layui框架组件下载

layer 采用 MIT 开源许可证,将会永久性提供无偿服务。因着数年的坚持维护,截至到2017年9月13日,已运用在超过 30万 家 Web 平台,其中不乏众多知名大型365棋牌老虎机爆分图_365棋牌封号如何处理_365指间棋牌。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案,并且她仍在与 Layui 一并高速发展。

预览截图

应用介绍

  layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

  在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被9551302人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

  layer 采用 MIT 开源许可证,将会永久性提供无偿服务。因着数年的坚持维护,截至到2017年9月13日,已运用在超过 30万 家 Web 平台,其中不乏众多知名大型365棋牌老虎机爆分图_365棋牌封号如何处理_365指间棋牌。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案,并且她仍在与 Layui 一并高速发展。

  特别说明:事件需自己绑定,以下只展现调用代码。

  

//初体验
  layer.alert('内容')
  //第三方扩展皮肤
  layer.alert('内容', {
  icon: 1,
  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
  })
  //询问框
  layer.confirm('您是如何看待前端开发?', {
  btn: ['重要','奇葩'] //按钮
  }, function(){
  layer.msg('的确很重要', {icon: 1});
  }, function(){
  layer.msg('也可以这样', {
  time: 20000, //20s后自动关闭
  btn: ['明白了', '知道了']
  });
  });
  //提示层
  layer.msg('玩命提示中');
  //墨绿深蓝风
  layer.alert('墨绿风格,点击确认看深蓝', {
  skin: 'layui-layer-molv' //样式类名
  ,closeBtn: 0
  }, function(){
  layer.alert('偶吧深蓝style', {
  skin: 'layui-layer-lan'
  ,closeBtn: 0
  ,anim: 4 //动画类型
  });
  });
  //捕获页
  layer.open({
  type: 1,
  shade: false,
  title: false, //不显示标题
  content: $('.layer_notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响

  

cancel: function(){
  layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
  }
  });
  //页面层
  layer.open({
  type: 1,
  skin: 'layui-layer-rim', //加上边框
  area: ['420px', '240px'], //宽高
  content: 'html内容'
  });
  //自定页
  layer.open({
  type: 1,
  skin: 'layui-layer-demo', //样式类名
  closeBtn: 0, //不显示关闭按钮
  anim: 2,
  shadeClose: true, //开启遮罩关闭
  content: '内容'
  });
  //tips层
  layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
  //iframe层
  layer.open({
  type: 2,
  title: 'layer mobile页',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: 'mobile/' //iframe的url
  });
  //iframe窗
  layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不显示关闭按钮
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角弹出
  time: 2000, //2秒后自动关闭
  anim: 2,
  content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
  end: function(){ //此处用于演示
  layer.open({
  type: 2,
  title: '很多时候,我们想最大化看,比如像这个页面。',
  shadeClose: true,
  shade: false,
  maxmin: true, //开启最大化最小化按钮
  area: ['893px', '600px'],
  content: '//fly.layui.com/'
  });
  }
  });
  //加载层
  var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  //loading层
  var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
  });
  //小tips
  layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
  tips: [1, '#3595CC'],
  time: 4000
  });
  //prompt层
  layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
  layer.close(index);
  layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
  layer.close(index);
  layer.msg('演示完毕!您的口令:'+ pass +'
您最后写下了:'+text);   });   });   //tab层   layer.tab({   area: ['600px', '300px'],   tab: [{   title: 'TAB1',   content: '内容1'   }, {   title: 'TAB2',   content: '内容2'   }, {   title: 'TAB3',   content: '内容3'   }]   });   //相册层   $.getJSON('test/photos.json?v='+new Date, function(json){   layer.photos({   photos: json //格式见API文档手册页   ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机   });   });


点赞(0) 打赏

立即下载

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部