Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use layui-layer independent components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use layui-layer independent components" this article.

First, when using, please put the entire folder layer in any directory of your site, just introduce layer.js, in addition to jQuery, other files do not need to be introduced.

Second, if your js introduction is through merge processing or you do not want to use the absolute path obtained automatically by layer, you can configure it through layer.config ()

3. Jquery needs 1.8 +.

After downloading layer, deploy it to any directory in your project (of course, we recommend putting it in the front-end related directory), you can't move the file structure in layer, because they are an inseparable combination. Something like this: (special note: you need to bring the entire layer folder into your file, not just the layer.js file)

You don't have to worry about what those files are for, you just need to identify one file: layer.js is right, and when you try to render layer on a page, you should do this: (the simplest example)

.btn {width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px } click me $(".btn") .bind ("click", function () {layer.msg ('click me is the most beautiful!') ;}); $("# btn") .bind ("click", function () {/ / layer.msg ('people who click on me are the most beautiful!') ; layer.msg ('this item does not exist or has been removed from the shelves, look at other goods!' , {time: 3000});}

More examples:

.btn:nth-child (odd) {width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px;} .btn:nth-child (even) {width: 100% Height: 50px; line-height: 50px; background: aqua; text-align: center; font-size: 15px;} # test5 {text-align: center; width: 500px; margin-left: 500px Click me .btn click me test2 click me parentIframe click me test4 click me test5 $(function () {$("# btn") .bind ("click", function () {layer.msg ('click my person is the most beautiful!') ;}) / / pops up a page layer $('# test2'). On ('click', function () {layer.open ({type: 1, area: [' 600px, '360px'], shadeClose: true / / Click the mask to close content:'\ Custom content-- add the description content you need\'}) }) / / Pop up an iframe layer $('# parentIframe'). On ('click', function () {layer.open ({type: 2, title:' iframe parent-son operation', maxmin: true, shadeClose: true / / Click the mask to close the layer area: ['800px',' 520px'], content: 'parentIframe.html'}) }); / / Pop up a loading layer $('# test4'). On ('click', function () {var ii = layer.load (); / / demonstrate ajax callback setTimeout (function () {layer.close (ii);}, 1000);}) with setTimeout / / Pop up a tips layer $('# test5') .on ('click', function () {layer.tips (' Hello tipsoverview,'# test5');});}) .btn:nth-child (odd) {width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px }. Btn:nth-child (even) {width: 100%; height: 50px; line-height: 50px; background: aqua; text-align: center; font-size: 15px;} # test5 {text-align: center Width: 100px; margin-left: 100px } click me .btn, test2, parentIframe, test4, test5, test6, test7, test8, test9 $(function () {("# btn"). Bind ("click") Function () {layer.msg ('those who click on me are the most beautiful!') ;}) / / pops up a page layer $('# test2'). On ('click', function () {layer.open ({type: 1, area: [' 600px, '360px'], shadeClose: true / / Click the mask to close content:'\ Custom content-- add the description content you need\'}) }) / / Pop up an iframe layer $('# parentIframe'). On ('click', function () {layer.open ({type: 2, title:' iframe parent-son operation', maxmin: true, shadeClose: true / / Click the mask to close the layer area: ['800px',' 520px'], content: 'parentIframe.html'}) }); / / Pop up a loading layer $('# test4'). On ('click', function () {var ii = layer.load (); / / demonstrate ajax callback setTimeout (function () {layer.close (ii);}, 1000);}) with setTimeout / / Pop up a tips layer $('# test5') .on ('click', function () {layer.tips (' Hello tipsoverview,'# test5');}) / / = / / Multi-window mode, cascading top $('# test6'). On ('click', function () {layer.open ({type: 2 / / here take iframe as an example, title:' when you select this form It will be at the top', area: ['390pxcow,' 330px`], shade: 0, offset: [/ / for demonstration Random coordinates Math.random () * ($(window). Height ()-300), Math.random () * ($(window). Width ()-390)], maxmin: true, content: 'settop.html', btn: [' continue popping' 'close all'] / / just to demonstrate, yes: function () {$(that) .click () / / this is just for demonstration. In actual use, you can eliminate}, btn2: function () {layer.closeAll () }, zIndex: layer.zIndex / / key 1, success: function (layero) {layer.setTop (layero); / / key 2}});}) / / configure a transparent query box $('# test7') .on ('click', function () {layer.msg (' most of the parameters can be shared

Match properly and show different styles', {time: 20000, / / automatically close btn after 20s: ['got it', 'got it','Oh']});}) / / demonstrate a bulletin layer $('# test8'). On ('click', function () {layer.open ({type: 1, title: false / / No title bar is displayed, closeBtn: false, area:' 300px ', shade: 0. 8, id:' LAY_layuipro' / / sets an id to prevent repeated popups, resize: false, btn: ['quick onlookers', 'cruel refusal'], btnAlign:'c', moveType: 1 / / drag mode 0 or 1, content: 'content

Content', success: function (layero) {var btn = layero.find ('.layui-layer-btn'); btn.find (' .layui-layer-btn0') .attr ({href: 'http://www.layui.com/', target:' _ blank'}) })) / / Edge pop-up $('# test9') .on ('click', function () {layer.open ({type: 1, offset:' c'/ / specific configuration reference: offset parameter items (t, r, b, l, c) Content: 'content', btn: 'close all', btnAlign:'c'/ / button is centered, shade: 0 / / does not show mask, yes: function () {layer.closeAll () The above is all the content of the article "how to use layui-layer Independent components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.