Home > Article > Web Front-end > How to use layui

How to use layui

angryTomOriginal: 2019-07-31 10:09:3915912browse

How to use layui

If you want to know more about layui, you can click: layui tutorial

##What is layui

Layer, a web pop-up (layer) solution (js component) that can be implemented just by thinking of it , author Xianxin. The layer focuses on flexible customization by users to provide power for different people’s usage habits. The significance is that it can give your page a richer and more convenient operating experience, and you can easily achieve this by simply configuring the relevant parameters when calling. —–From Baidu Encyclopedia

Based on the number of users of the layer component, we can see that the layui framework is very good. Next, let’s start the layui journey!

How to use layui

Layui structure

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

layui built-in module

How to use layui

The following is a list of several component modules that I feel are more important

. After all, I am not specialized in front-end.

How to use layui

Get LayuiGet it through the Layui official website. For details, please refer to the layui official website.

The beauty of Layer elastic layerWe can also get it by accessing Layer, get the layer component and import it into the project. Please refer to the figure below for the specific step structure:

1. Introduce the jQuery framework into the page

2. Completely copy the downloaded layer folder into the project

3. Introduce the layer.js file in the layer directory

## 4. Start the layer elastic journey

How to use layui First experience

 <!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>

Only a simple demonstration is done here. For more elastic layer implementation, please refer to the specific code posted on the Layer official website.

//初体验
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的选择，指定弹出图片动画类型，默认随机
  });
});

The above is the detailed content of How to use layui. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use layui to pop up a formNext article：How to use layui to pop up a form

See more

How to use layui

Related articles