传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 上海分校-小影 于 2017-5-18 11:49 编辑

微信图片_20170518114524.jpg


导读:

弹出层几乎在任何项目中都会用到,各种场景,提示信息、询问信息、tips提示、iframe层、loading层等等,之前开发中,这些都是通过jQuery自己编写代码实现,通用性、浏览器兼容性都比较差,今天推荐一款国产的web弹出层组件,它就是layer,作者这样称呼它“国内最多人使用的弹层组件”,我给它的评价是“最好用的弹出层组件”,接下来我们一起学习下。


简介:
  • layer是一款近年来口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
  • 在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer。
  • layer兼容了包括IE6在内的所有主流浏览器。
  • 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。
  • 历经多年,截至到2016年11月7号,已超过20万家web平台正在使用layer,其中不乏知名网站。
  • 目前最新版本是3.0(2016年11月7日更新)


下载:

使用:
layer的使用非常简单,只需要在代码中引入下载文件中layer.js即可(当然了jQuery是必要的组件):
1.png
效果:
2.png
是不是很简单啊~~

更多的用法参见官网:http://layer.layui.com/

更多效果:
带图标的提示框:
3.jpg

确认框:
4.png

tips提示:
5.jpg

tab弹出框:
6.png

prompt层:
7.png

相册弹出层:
8.jpg
自定义页:
9.png

结束:
怎么样? 一款功能强大的弹出层组件就这样简单的用起来了,赶紧把你项目中那些臃肿的弹出层代码扔到垃圾桶吧~~ 哈哈~~

分享至 : QQ空间
收藏

4 个回复

倒序浏览
嘎嘎 很棒啊  收藏了
回复 使用道具 举报
虽然看不懂,但是感觉好腻害!
黑马入学必看教程领取+报名VIP专属通道请加QQ3414556270
黑马论坛报名唯一VIP专属通道地址:http://bbs.itheima.com/thread-329993-1-1.html
回复 使用道具 举报
烽火狼烟 发表于 2017-5-18 12:14
嘎嘎 很棒啊  收藏了

回复 使用道具 举报
橘子哥 发表于 2017-5-18 13:04
虽然看不懂,但是感觉好腻害!

橘子哥也很厉害~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /6 下一条