layui怎么用

来源：互联网 2024-10-14 19:11:43

如果你想了解更多关于layui的知识，可以点击：layui教程

layui是什么

　　layer，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件），作者贤心。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现。—–来自百度百科

　　根据layer组件使用人数，就可以看出layui框架是非常不错的，接下来我们就开启layui之旅吧！

Layui的结构

├─css //css目录  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）  │  │  ├─laydate  │  │  ├─layer  │  │  └─layim  │  └─layui.css //核心样式文件  ├─font  //字体图标目录  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）  │─lay //模块核心目录  │  └─modules //各模块组件  │─layui.js //基础核心库  └─layui.all.js //包含layui.js和所有模块的合并文件

layui内置模块

下面列出我感觉比较重要的几个组件模块，毕竟不是专门从事前端的。

获取Layui

通过Layui官网获取,详情请参考layui官网。

Layer弹层之美

我们也可以通过访问Layer来获取，获取到layer组件后导入项目中。具体步骤结构参考下图：

　　1.在页面中引入jQuery框架

　　2.将下载的layer文件夹完整复制到项目中

　　3.引入layer目录下的layer.js文件

　　4.开启layer弹层之旅

初体验

 <!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <title>layer弹层之美</title>  <ｓｃｒｉｐｔ type="text/javascript" src="js/jquery-3.2.1.min.js" ></ｓｃｒｉｐｔ>  <ｓｃｒｉｐｔ type="text/javascript" src="layer/layer.js" ></ｓｃｒｉｐｔ></head><ｓｃｒｉｐｔ type="text/javascript">      $(function(){        $("#btn").click(function(){             //询问框                        layer.confirm(&#39;您是如何看待前端开发？&#39;, {                          btn: [&#39;重要&#39;,&#39;奇葩&#39;] //按钮                        }, function(){                          layer.msg(&#39;的确很重要&#39;, {icon: 1});                        }, function(){                          layer.msg(&#39;也可以这样&#39;, {                            time: 20000, //20s后自动关闭                            btn: [&#39;明白了&#39;, &#39;知道了&#39;]                          });                        });        })      })</ｓｃｒｉｐｔ><body>    <input type="button" value="提交" id="btn"/></body></html>

这里只做了简单的演示，更多弹层实现请参考Layer官网具体代码贴出。

//初体验layer.alert(&#39;内容&#39;)//第三方扩展皮肤layer.alert(&#39;内容&#39;, {  icon: 1,  skin: &#39;layer-ext-moon&#39; //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅})//询问框layer.confirm(&#39;您是如何看待前端开发？&#39;, {  btn: [&#39;重要&#39;,&#39;奇葩&#39;] //按钮}, function(){  layer.msg(&#39;的确很重要&#39;, {icon: 1});}, function(){  layer.msg(&#39;也可以这样&#39;, {    time: 20000, //20s后自动关闭    btn: [&#39;明白了&#39;, &#39;知道了&#39;]  });});//提示层layer.msg(&#39;玩命提示中&#39;);//墨绿深蓝风layer.alert(&#39;墨绿风格，点击确认看深蓝&#39;, {  skin: &#39;layui-layer-molv&#39; //样式类名  ,closeBtn: 0}, function(){  layer.alert(&#39;偶吧深蓝style&#39;, {    skin: &#39;layui-layer-lan&#39;    ,closeBtn: 0    ,anim: 4 //动画类型  });});//捕获页layer.open({  type: 1,  shade: false,  title: false, //不显示标题  content: $(&#39;.layer_notice&#39;), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  cancel: function(){    layer.msg(&#39;捕获就是从页面已经存在的元素上，包裹layer的结构&#39;, {time: 5000, icon:6});  }});//页面层layer.open({  type: 1,  skin: &#39;layui-layer-rim&#39;, //加上边框  area: [&#39;420px&#39;, &#39;240px&#39;], //宽高  content: &#39;html内容&#39;});//自定页layer.open({  type: 1,  skin: &#39;layui-layer-demo&#39;, //样式类名  closeBtn: 0, //不显示关闭按钮  anim: 2,  shadeClose: true, //开启遮罩关闭  content: &#39;内容&#39;});//tips层layer.tips(&#39;Hi，我是tips&#39;, &#39;吸附元素选择器，如#id&#39;);//iframe层layer.open({  type: 2,  title: &#39;layer mobile页&#39;,  shadeClose: true,  shade: 0.8,  area: [&#39;380px&#39;, &#39;90%&#39;],  content: &#39;mobile/&#39; //iframe的url}); //iframe窗layer.open({  type: 2,  title: false,  closeBtn: 0, //不显示关闭按钮  shade: [0],  area: [&#39;340px&#39;, &#39;215px&#39;],  offset: &#39;rb&#39;, //右下角弹出  time: 2000, //2秒后自动关闭  anim: 2,  content: [&#39;test/guodu.html&#39;, &#39;no&#39;], //iframe的url，no代表不显示滚动条  end: function(){ //此处用于演示    layer.open({      type: 2,      title: &#39;很多时候，我们想最大化看，比如像这个页面。&#39;,      shadeClose: true,      shade: false,      maxmin: true, //开启最大化最小化按钮      area: [&#39;893px&#39;, &#39;600px&#39;],      content: &#39;//fly.layui.com/&#39;    });  }});//加载层var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2//loading层var index = layer.load(1, {  shade: [0.1,&#39;#fff&#39;] //0.1透明度的白色背景});//小tipslayer.tips(&#39;我是另外一个tips，只不过我长得跟之前那位稍有些不一样。&#39;, &#39;吸附元素选择器&#39;, {  tips: [1, &#39;#3595CC&#39;],  time: 4000});//prompt层layer.prompt({title: &#39;输入任何口令，并确认&#39;, formType: 1}, function(pass, index){  layer.close(index);  layer.prompt({title: &#39;随便写点啥，并确认&#39;, formType: 2}, function(text, index){    layer.close(index);    layer.msg(&#39;演示完毕！您的口令：&#39;+ pass +&#39;<br>您最后写下了：&#39;+text);  });});//tab层layer.tab({  area: [&#39;600px&#39;, &#39;300px&#39;],  tab: [{    title: &#39;TAB1&#39;,     content: &#39;内容1&#39;  }, {    title: &#39;TAB2&#39;,     content: &#39;内容2&#39;  }, {    title: &#39;TAB3&#39;,     content: &#39;内容3&#39;  }]});//相册层$.getJSON(&#39;test/photos.json?v=&#39;+new Date, function(json){  layer.photos({    photos: json //格式见API文档手册页    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机  });});

layui

本文地址：http://www.wztg.net/wenda/71229.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）