layer.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>H+ 后台主题UI框架 - web弹层组件layer</title>
  7. <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  8. <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">
  9. <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  10. <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  11. <link href="../css/animate.min.css" rel="stylesheet">
  12. <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
  13. </head>
  14. <body class="gray-bg">
  15. <div class="wrapper wrapper-content animated fadeIn">
  16. <div class="row">
  17. <div class="col-sm-12">
  18. <div class="ibox float-e-margins">
  19. <div class="ibox-title">
  20. <h5>layer简介</h5>
  21. <div class="ibox-tools">
  22. <a class="collapse-link">
  23. <i class="fa fa-chevron-up"></i>
  24. </a>
  25. <a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
  26. <i class="fa fa-wrench"></i>
  27. </a>
  28. <ul class="dropdown-menu dropdown-user">
  29. <li><a href="tabs_panels.html#">选项1</a>
  30. </li>
  31. <li><a href="tabs_panels.html#">选项2</a>
  32. </li>
  33. </ul>
  34. <a class="close-link">
  35. <i class="fa fa-times"></i>
  36. </a>
  37. </div>
  38. </div>
  39. <div class="ibox-content">
  40. <p>layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。</p>
  41. <p>在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被1739623人次关注)。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。</p>
  42. <p>layer遵循LGPL协议,将永久性提供无偿服务。历经三年,截至到2015年5月23日,已运用在10万余家web平台,其中包括中国联通、蚂蚁短租、慕课网、phpyun等等知名网站,如果您有大型项目也在使用layer,您可以联系作者,以便在此展现案例,也为您的品牌推广尽一些绵薄之力。</p>
  43. <hr>
  44. <p>layer官网:<a href="http://layer.layui.com/" target="_blank">http://layer.layui.com/</a>
  45. <br>layer官网文档:<a href="http://layer.layui.com/api.html" target="_blank">http://layer.layui.com/api.html</a>
  46. </p>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="row">
  52. <div class="col-sm-12">
  53. <div class="ibox float-e-margins">
  54. <div class="ibox-title">
  55. <h5>简单示例</h5>
  56. <div class="ibox-tools">
  57. <a class="collapse-link">
  58. <i class="fa fa-chevron-up"></i>
  59. </a>
  60. <a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
  61. <i class="fa fa-wrench"></i>
  62. </a>
  63. <ul class="dropdown-menu dropdown-user">
  64. <li><a href="tabs_panels.html#">选项1</a>
  65. </li>
  66. <li><a href="tabs_panels.html#">选项2</a>
  67. </li>
  68. </ul>
  69. <a class="close-link">
  70. <i class="fa fa-times"></i>
  71. </a>
  72. </div>
  73. </div>
  74. <div class="ibox-content">
  75. <div class="clearfix layer-area" id="chutiyan">
  76. <a href="javascript:;" class="btn btn-outline btn-default">初体验</a>
  77. <a href="javascript:;" class="btn btn-outline btn-default">第三方扩展皮肤</a>
  78. <a href="javascript:;" class="btn btn-outline btn-default">询问层</a>
  79. <a href="javascript:;" class="btn btn-outline btn-default">提示层</a>
  80. <a href="javascript:;" class="btn btn-outline btn-default">墨绿深蓝风</a>
  81. <a href="javascript:;" class="btn btn-outline btn-default">捕获页</a>
  82. <a href="javascript:;" class="btn btn-outline btn-default">页面层</a>
  83. <a href="javascript:;" class="btn btn-outline btn-default">自定页</a>
  84. <a href="javascript:;" class="btn btn-outline btn-default">tips层</a>
  85. <a href="javascript:;" class="btn btn-outline btn-default">iframe层</a>
  86. <a href="javascript:;" class="btn btn-outline btn-default">iframe窗</a>
  87. <a href="javascript:;" class="btn btn-outline btn-default">加载层</a>
  88. <a href="javascript:;" class="btn btn-outline btn-default">loading层</a>
  89. <a href="javascript:;" class="btn btn-outline btn-default">小tips</a>
  90. <a href="javascript:;" class="btn btn-outline btn-default">prompt层</a>
  91. <a href="javascript:;" class="btn btn-outline btn-default">tab层</a>
  92. <a href="javascript:;" class="btn btn-outline btn-default">相册层</a>
  93. </div>
  94. <pre style="height:300px;overflow:auto;" id="demo1">
  95. 特别说明:事件需自己绑定,以下只展现调用代码。
  96. <p>//初体验
  97. parent.layer.alert('内容')</p>
  98. <p>//第三方扩展皮肤
  99. parent.layer.alert('内容', {
  100. icon: 1,
  101. skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,<a target="_balnk" style="color:#00B2E2;" href="http://layer.layui.com/skin.html#publish">去这里查阅</a>
  102. })</p>
  103. <p>//询问框
  104. parent.layer.confirm('您是如何看待前端开发?', {
  105. btn: ['重要','奇葩'], //按钮
  106. shade: false //不显示遮罩
  107. }, function(){
  108. parent.layer.msg('的确很重要', {icon: 1});
  109. }, function(){
  110. parent.layer.msg('奇葩么么哒', {shift: 6});
  111. });</p>
  112. <p>//提示层
  113. parent.layer.msg('玩命提示中');
  114. </p>
  115. <p>//墨绿深蓝风
  116. parent.layer.alert('墨绿风格,点击确认看深蓝', {
  117. skin: 'layui-layer-molv' //样式类名
  118. }, function(){
  119. parent.layer.alert('偶吧深蓝style', {
  120. skin: 'layui-layer-lan',
  121. shift: 4 //动画类型
  122. });
  123. });
  124. </p>
  125. <p>//捕获页
  126. parent.layer.open({
  127. type: 1,
  128. shade: false,
  129. title: false, //不显示标题
  130. content: $('.layer_notice'), //捕获的元素
  131. cancel: function(index){
  132. parent.layer.close(index);
  133. this.content.show();
  134. parent.layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构',{time: 5000});
  135. }
  136. });
  137. </p>
  138. <p>//页面层
  139. parent.layer.open({
  140. type: 1,
  141. skin: 'layui-layer-rim', //加上边框
  142. area: ['420px', '240px'], //宽高
  143. content: 'html内容'
  144. });
  145. </p>
  146. <p>//自定页
  147. parent.layer.open({
  148. type: 1,
  149. skin: 'layui-layer-demo', //样式类名
  150. closeBtn: false, //不显示关闭按钮
  151. shift: 2,
  152. shadeClose: true, //开启遮罩关闭
  153. content: '内容'
  154. });
  155. </p>
  156. <p>//tips层
  157. layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
  158. </p>
  159. <p>//iframe层
  160. parent.layer.open({
  161. type: 2,
  162. title: 'layer mobile页',
  163. shadeClose: true,
  164. shade: 0.8,
  165. area: ['380px', '90%'],
  166. content: 'http://layer.layui.com/mobile/' //iframe的url
  167. });
  168. </p>
  169. <p>//iframe窗
  170. parent.layer.open({
  171. type: 2,
  172. title: false,
  173. closeBtn: false,
  174. shade: [0],
  175. area: ['340px', '215px'],
  176. offset: 'rb', //右下角弹出
  177. time: 2000, //2秒后自动关闭
  178. shift: 2,
  179. content: ['http://www.zi-han.net', 'no'], //iframe的url,no代表不显示滚动条
  180. end: function(){ //此处用于演示
  181. parent.layer.open({
  182. type: 2,
  183. title: '很多时候,我们想最大化看,比如像这个页面。',
  184. shadeClose: true,
  185. shade: false,
  186. maxmin: true, //开启最大化最小化按钮
  187. area: ['1150px', '650px'],
  188. content: 'http://www.zi-han.net'
  189. });
  190. }
  191. });
  192. </p>
  193. <p>//加载层
  194. var index = parent.layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  195. </p>
  196. <p>//loading层
  197. var index = parent.layer.load(1, {
  198. shade: [0.1,'#fff'] //0.1透明度的白色背景
  199. });
  200. </p>
  201. <p>//小tips
  202. layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
  203. tips: [1, '#3595CC'],
  204. time: 4000
  205. });
  206. </p>
  207. <p>//prompt层
  208. parent.layer.prompt({
  209. title: '输入任何口令,并确认',
  210. formType: 1 //prompt风格,支持0-2
  211. }, function(pass){
  212. layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text){
  213. layer.msg('演示完毕!您的口令:'+ pass +' 您最后写下了:'+ text);
  214. });
  215. });
  216. </p>
  217. <p>//tab层
  218. parent.layer.tab({
  219. area: ['600px', '300px'],
  220. tab: [{
  221. title: 'TAB1',
  222. content: '内容1'
  223. }, {
  224. title: 'TAB2',
  225. content: '内容2'
  226. }, {
  227. title: 'TAB3',
  228. content: '内容3'
  229. }]
  230. });
  231. </p>
  232. <p>//相册层
  233. $.getJSON('../js/demo/photos.json', function(json){
  234. layer.photos({
  235. photos: json //格式见API文档手册页
  236. });
  237. });
  238. </p></pre>
  239. <p>更多示例请访问:<a href="http://layer.layui.com/" target="_blank">http://layer.layui.com/</a></p>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. <script src="../js/jquery.min.js?v=2.1.4"></script>
  246. <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  247. <script src="../js/plugins/layer/layer.min.js"></script>
  248. <script src="../js/content.min.js?v=1.0.0"></script>
  249. <script src="../js/demo/layer-demo.min.js"></script>
  250. </body>
  251. </html>