Maison > Article > interface Web > introduction à la couche contextuelle de composant indépendante de la couche layui

introduction à la couche contextuelle de composant indépendante de la couche layui

尚avant: 2019-12-11 16:47:472594parcourir

[Notes]

1 Lors de l'utilisation, veuillez placer l'intégralité de la couche de dossier dans n'importe quel répertoire de votre site et introduire simplement layer.js , à l'exception de jQuery. , il n'est pas nécessaire d'introduire d'autres fichiers.

2. Si votre importation js est traitée par fusion ou si vous ne souhaitez pas utiliser le chemin absolu obtenu automatiquement par la couche, vous pouvez le configurer via layer.config() (voir la page officielle de l'API pour détails)

3. jquery nécessite 1.8+

Après avoir téléchargé la couche, déployez-la dans n'importe quel répertoire de votre projet (bien sûr, nous vous recommandons de la placer dans le répertoire associé du front-end). Vous ne pouvez pas déplacer la structure des fichiers dans le calque, car ils constituent une combinaison indissociable. Comme ceci : (Remarque : vous devez introduire l'intégralité du dossier layer dans votre fichier, pas seulement le fichier layer.js)

introduction à la couche contextuelle de composant indépendante de la couche layui

Vous n'avez pas à vous soucier de ces fichiers A quoi ça sert ? Vous n'avez besoin d'identifier qu'un seul fichier : layer.js C'est vrai, lorsque vous essayez de présenter le calque sur la page, vous devez le faire comme ceci : (l'exemple le plus simple)

<!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
    });
});

<.>Plus d'exemple :

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

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne

Tutoriel d'utilisation de Layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery layui JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：tutoriel du module d'emballage layuiArticle suivant：tutoriel du module d'emballage layui

Articles Liés

Voir plus