弹出层小插件之(二) layer&layui

其实layer或者layui相对于上次所说的 sweetalert来说不仅仅有弹出层，它有很多的功能，这也大大的提高了我们的开发效率，根据我们项目的实际需要的效果进行选择。下面介绍下Layer的用法吧，我想这也是小伙伴们最想要的：

 

　　　1.当然是要下载layer了  下载地址：http://layer.layui.com

　　　2.下载好的文件不要修改里面内容 直接放到你的项目中即可（注意）

　　　3.layer引入方式

　　　　

　　　4.layui的方法与用法与layer相似 

　　　　

1. 特别说明：事件需自己绑定，以下只展现调用代码。

2. //初体验

3. layer.alert('内容')

4. //第三方扩展皮肤

5. layer.alert('内容', {
6. icon: 1,
7. skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
8. })

9. //询问框

10. layer.confirm('您是如何看待前端开发？', {
11. btn: ['重要','奇葩'] //按钮
12. }, function(){
13. layer.msg('的确很重要', {icon: 1});
14. }, function(){
15. layer.msg('也可以这样', {
16. time: 20000, //20s后自动关闭
17. btn: ['明白了', '知道了']
18. });
19. });

20. //提示层

21. layer.msg('玩命提示中');

22. //墨绿深蓝风

23. layer.alert('墨绿风格，点击确认看深蓝', {
24. skin: 'layui-layer-molv' //样式类名
25. ,closeBtn: 0
26. }, function(){
27. layer.alert('偶吧深蓝style', {
28. skin: 'layui-layer-lan'
29. ,closeBtn: 0
30. ,anim: 4 //动画类型
31. });
32. });

33. //捕获页

34. layer.open({
35. type: 1,
36. shade: false,
37. title: false, //不显示标题
38. content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
39. cancel: function(){
40. layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
41. }
42. });

43. //页面层

44. layer.open({
45. type: 1,
46. skin: 'layui-layer-rim', //加上边框
47. area: ['420px', '240px'], //宽高
48. content: 'html内容'
49. });

50. //自定页

51. layer.open({
52. type: 1,
53. skin: 'layui-layer-demo', //样式类名
54. closeBtn: 0, //不显示关闭按钮
55. anim: 2,
56. shadeClose: true, //开启遮罩关闭
57. content: '内容'
58. });

59. //tips层

60. layer.tips('Hi，我是tips', '吸附元素选择器，如#id');

61. //iframe层

62. layer.open({
63. type: 2,
64. title: 'layer mobile页',
65. shadeClose: true,
66. shade: 0.8,
67. area: ['380px', '90%'],
68. content: 'http://layer.layui.com/mobile/' //iframe的url
69. });

70. //iframe窗

71. layer.open({
72. type: 2,
73. title: false,
74. closeBtn: 0, //不显示关闭按钮
75. shade: [0],
76. area: ['340px', '215px'],
77. offset: 'rb', //右下角弹出
78. time: 2000, //2秒后自动关闭
79. anim: 2,
80. content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
81. end: function(){ //此处用于演示
82. layer.open({
83. type: 2,
84. title: '很多时候，我们想最大化看，比如像这个页面。',
85. shadeClose: true,
86. shade: false,
87. maxmin: true, //开启最大化最小化按钮
88. area: ['893px', '600px'],
89. content: 'http://fly.layui.com/'
90. });
91. }
92. });

93. //加载层

94. var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

95. //loading层

96. var index = layer.load(1, {
97. shade: [0.1,'#fff'] //0.1透明度的白色背景
98. });

99. //小tips

100. layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
101. tips: [1, '#3595CC'],
102. time: 4000
103. });

104. //prompt层

105. layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
106. layer.close(index);
107. layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
108. layer.close(index);
109. layer.msg('演示完毕！您的口令：'+ pass +'
     您最后写下了：'+text);
110. });
111. });

112. //tab层

113. layer.tab({
114. area: ['600px', '300px'],
115. tab: [{
116. title: 'TAB1',
117. content: '内容1'
118. }, {
119. title: 'TAB2',
120. content: '内容2'
121. }, {
122. title: 'TAB3',
123. content: '内容3'
124. }]
125. });

126. //相册层

127. $.getJSON('test/photos.json?v='+new Date, function(json){
128. layer.photos({
129. photos: json //格式见API文档手册页
130. ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
131. });
132. });
     4. 使用的过程中遇到了一个问题   就是loading的时候那个加载图案会跑到左边   经过尝试  把css单独拿出来  就会解决这个问题！！！希望这次补充对有这个问题的小伙伴能有帮助2017.3.20