Heim >Web-Frontend >Layui-Tutorial >Einführung in die Laui-Layer-unabhängige Komponenten-Popup-Layer

Einführung in die Laui-Layer-unabhängige Komponenten-Popup-Layer

尚nach vorne: 2019-12-11 16:47:472634Durchsuche

[Hinweise]

1. Platzieren Sie bei der Verwendung bitte den gesamten Ordner „layer“ in einem beliebigen Verzeichnis Ihrer Site und führen Sie einfach „layer.js“ ein, mit Ausnahme von jQuery , andere Dateien müssen nicht eingeführt werden.

2. Wenn Ihr js-Import durch Zusammenführen verarbeitet wird oder Sie nicht den vom Layer automatisch erhaltenen absoluten Pfad verwenden möchten, können Sie ihn über layer.config() konfigurieren (siehe die offizielle API-Seite für). Details)

3. jquery erfordert 1.8+

Stellen Sie den Layer nach dem Herunterladen in einem beliebigen Verzeichnis in Ihrem Projekt bereit (wir empfehlen natürlich, ihn im Front-End-Verzeichnis abzulegen). Sie können die Dateistruktur in der Ebene nicht verschieben, da sie eine untrennbare Kombination darstellen. So: (Besonderer Hinweis: Sie müssen den gesamten Ebenenordner in Ihre Datei einfügen, nicht nur die Datei „layer.js“)

Einführung in die Laui-Layer-unabhängige Komponenten-Popup-Layer

Sie müssen sich darüber keine Sorgen machen Diese Dateien Wofür ist es? Sie müssen nur eine Datei identifizieren: Layer.js Das ist richtig, wenn Sie versuchen, die Ebene auf der Seite darzustellen, sollten Sie es so machen: (das einfachste Beispiel)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn{
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="btn">点我</div>
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
            $(".btn").bind("click",function(){
                layer.msg(&#39;点我的人最美！&#39;);
            });
        </script>
    </body>
</html>

$("#btn").bind("click",function(){
        //layer.msg(&#39;点我的人最美！&#39;);
        layer.msg(&#39;此商品不存在或者已下架，看看其他商品吧！&#39;, {
        time: 3000
    });
});

Weiteres Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .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;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">点我.btn</div>
        <div class="btn" id="test2">点我test2</div>
        <div class="btn" id="parentIframe">点我parentIframe</div>
        <div class="btn" id="test4">点我test4</div>
        <div class="btn" id="test5">点我test5</div>
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg(&#39;点我的人最美！&#39;);
            });
            
            //弹出一个页面层
            $(&#39;#test2&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 1,
              area: [&#39;600px&#39;, &#39;360px&#39;],
              shadeClose: true,   //点击遮罩关闭
              content: &#39;\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>&#39;
              });
            });
            
            //弹出一个iframe层
            $(&#39;#parentIframe&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 2,
              title: &#39;iframe父子操作&#39;,
              maxmin: true,
              shadeClose: true, //点击遮罩关闭层
              area : [&#39;800px&#39; , &#39;520px&#39;],
              content: &#39;parentIframe.html&#39;
              });
            });

            //弹出一个loading层
            $(&#39;#test4&#39;).on(&#39;click&#39;, function(){
              var ii = layer.load();
              //此处用setTimeout演示ajax的回调
              setTimeout(function(){
              layer.close(ii);
              }, 1000);
            });
            
            //弹出一个tips层
            $(&#39;#test5&#39;).on(&#39;click&#39;, function(){
              layer.tips(&#39;Hello tips!&#39;, &#39;#test5&#39;);
            });
            
        });
        </script>
    </body>
</html>

rrree

Weitere Laui-Kenntnisse finden Sie in der Spalte Tutorial zur Verwendung von Laui.

Das obige ist der detaillierte Inhalt vonEinführung in die Laui-Layer-unabhängige Komponenten-Popup-Layer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery layui JS

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Tutorial zum Laui-VerpackungsmodulNächster Artikel：Tutorial zum Laui-Verpackungsmodul

In Verbindung stehende Artikel

Mehr sehen