简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  layui怎么用

layui怎么用

angryTom
angryTomasal
2019-07-31 10:09:3915891semak imbas

layui怎么用

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

layui是什么

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

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

layui11.png

Layui的结构

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

layui内置模块 

layui12.png

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

layui13.png

获取Layui

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

Layer弹层之美

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

　　1.在页面中引入jQuery框架 

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

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

　　4.开启layer弹层之旅

layui14.png

初体验

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layer弹层之美</title>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript" src="layer/layer.js" ></script>
</head>
<script 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;]
                          });
                        });
        })
      })
</script>
<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透明度的白色背景
});
//小tips
layer.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的选择，指定弹出图片动画类型，默认随机
  });
});

Atas ialah kandungan terperinci layui怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：怎么使用layui弹出表单Artikel seterusnya：layui模板引擎如何使用

Artikel berkaitan

Lihat lagi