So verwenden Sie Laui-Layui-Tutorial-php.cn

Heim

Web-Frontend

Layui-Tutorial

So verwenden Sie Laui

angryTom

Jul 31, 2019 am 10:09 AM

layui

So verwenden Sie Laui

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

layui是什么

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

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

So verwenden Sie Laui

Layui的结构

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

Nach dem Login kopieren

layui内置模块

So verwenden Sie Laui

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

So verwenden Sie Laui

获取Layui

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

Layer弹层之美

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

　　1.在页面中引入jQuery框架

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

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

　　4.开启layer弹层之旅

So verwenden Sie Laui

初体验

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

Nach dem Login kopieren

这里只做了简单的演示，更多弹层实现请参考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的选择，指定弹出图片动画类型，默认随机
  });
});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7540

CakePHP-Tutorial

1381

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So richten Sie Jump on Laui-Anmeldeseite ein Apr 04, 2024 am 03:12 AM

Schritte zur Sprungeinstellung der Layui-Anmeldeseite: Sprungcode hinzufügen: Fügen Sie im Anmeldeformular ein Beurteilungsereignis hinzu, klicken Sie auf die Schaltfläche „Senden“ und springen Sie nach erfolgreicher Anmeldung über window.location.href zur angegebenen Seite. Ändern Sie die Formularkonfiguration: Fügen Sie dem Formularelement von „lay-filter="login" ein verstecktes Eingabefeld mit dem Namen „redirect“ und dem Wert der Zielseitenadresse hinzu.

So erhalten Sie Formulardaten in Laui Apr 04, 2024 am 03:39 AM

Layui bietet eine Vielzahl von Methoden zum Abrufen von Formulardaten, einschließlich des direkten Abrufens aller Felddaten des Formulars, des Abrufens des Werts eines einzelnen Formularelements, der Verwendung der formAPI.getVal()-Methode zum Abrufen des angegebenen Feldwerts, der Serialisierung der Formulardaten usw Wenn Sie es als AJAX-Anforderungsparameter verwenden und das Formularübermittlungsereignis abhören, werden Daten abgerufen.

Wie Laui Selbstanpassung umsetzt Apr 26, 2024 am 03:00 AM

Ein adaptives Layout kann mithilfe der Responsive-Layout-Funktion des Laui-Frameworks erreicht werden. Die Schritte umfassen: Referenzieren des Laui-Frameworks. Definieren Sie einen adaptiven Layout-Container und legen Sie die Klasse „layui-container“ fest. Verwenden Sie reaktionsfähige Haltepunkte (xs/sm/md/lg), um Elemente unter bestimmten Haltepunkten auszublenden. Geben Sie die Elementbreite mithilfe des Rastersystems (layui-col-) an. Abstand über Offset erzeugen (layui-offset-). Verwenden Sie reaktionsfähige Dienstprogramme (layui-invisible/show/block/inline), um die Sichtbarkeit von Elementen und deren Darstellung zu steuern.

So übertragen Sie Daten in Laui Apr 26, 2024 am 03:39 AM

Die Methode zur Verwendung von Laui zum Übertragen von Daten ist wie folgt: Verwenden Sie Ajax: Erstellen Sie das Anforderungsobjekt, legen Sie die Anforderungsparameter (URL, Methode, Daten) fest und verarbeiten Sie die Antwort. Integrierte Methoden verwenden: Vereinfachen Sie die Datenübertragung mit integrierten Methoden wie $.post, $.get, $.postJSON oder $.getJSON.

Was ist der Unterschied zwischen Laui und Vue? Apr 04, 2024 am 03:54 AM

Der Unterschied zwischen Laui und Vue spiegelt sich hauptsächlich in Funktionen und Anliegen wider. Layui konzentriert sich auf die schnelle Entwicklung von UI-Elementen und stellt vorgefertigte Komponenten zur Vereinfachung der Seitenkonstruktion bereit. Vue ist ein Full-Stack-Framework, das sich auf Datenbindung, Komponentenentwicklung und Statusverwaltung konzentriert und sich besser für die Erstellung komplexer Anwendungen eignet. Layui ist leicht zu erlernen und eignet sich zum schnellen Erstellen von Seiten; Vue hat eine steile Lernkurve, hilft aber beim Erstellen skalierbarer und leicht zu wartender Anwendungen. Abhängig von den Projektanforderungen und dem Kenntnisstand des Entwicklers kann das passende Framework ausgewählt werden.

So führen Sie Laui aus Apr 04, 2024 am 03:42 AM

Führen Sie zum Ausführen von Laui die folgenden Schritte aus: 1. Laui-Skript importieren; 3. Laui-Komponenten verwenden; 5. Skriptkompatibilität sicherstellen; Mit diesen Schritten können Sie Webanwendungen mit der Leistungsfähigkeit von Laui erstellen.

Was bedeutet Laui? Apr 04, 2024 am 04:33 AM

Laui ist ein Front-End-UI-Framework, das eine Fülle von UI-Komponenten, Tools und Funktionen bereitstellt, um Entwicklern dabei zu helfen, schnell moderne, reaktionsfähige und interaktive Webanwendungen zu erstellen. Zu seinen Funktionen gehören: flexibles und leichtes, modulares Design, umfangreiche Komponenten, leistungsstarke Tools und einfache Bedienung Anpassung. Es wird häufig bei der Entwicklung verschiedener Webanwendungen eingesetzt, darunter Managementsysteme, E-Commerce-Plattformen, Content-Management-Systeme, soziale Netzwerke und mobile Anwendungen.

Der Unterschied zwischen Laui-Framework und Vue-Framework Apr 26, 2024 am 01:27 AM

Laui und Vue sind Front-End-Frameworks. Laui ist eine leichtgewichtige Bibliothek, die UI-Komponenten und -Tools bereitstellt. Vue ist ein umfassendes Framework, das UI-Komponenten, Statusverwaltung, Datenbindung, Routing und andere Funktionen bereitstellt. Laui basiert auf einer modularen Architektur und Vue basiert auf einer Komponentenarchitektur. Laui hat ein kleineres Ökosystem, Vue hat ein großes und aktives Ökosystem. Die Lernkurve von Laui ist niedrig und die Lernkurve von Vue ist steil. Laui eignet sich für kleine Projekte und die schnelle Entwicklung von UI-Komponenten, während Vue für große Projekte und Szenarien geeignet ist, die umfangreiche Funktionen erfordern.

See all articles