layui怎么使用模块化-Tutorial Layui-php.cn

Rumah

hujung hadapan web

Tutorial Layui

layui怎么使用模块化

王林

Nov 24, 2020 am 10:04 AM

layuiModular

layui使用模块化的方法：遵循layui的模块规范建立一个入口文件，并通过layui.use()方法加载该入口文件即可，如【layui.use(['layer'],function(){var layer = layui.layer}】。

layui怎么使用模块化

本教程操作环境：windows10系统、layui2.5.6版，该方法适用于所有品牌电脑。

（学习视频分享：javascript视频教程）

模块化的使用：

注意：引入的JS是:/layui/layui.js

遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模块化的使用</title>
    <link rel="stylesheet" href="./layui/css/layui.css">

    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.js"></script>

</head>
<body>


<script>
    /*必须使用这个方法先引用对应的模块*/
    layui.use([&#39;layer&#39;],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>


</body>
</html>

补充：为了方便使用可以使用下面方法引入

function deleteDictBatch(){
    var form,layer;
    layui.use([&#39;form&#39;,&#39;layer&#39;],function () {
        form = layui.form;
        layer=layui.layer;
    });
    //获取选中的元素的个数
    var length_1 = $("[name=&#39;dictionaryCheckbox&#39;]:checked").length;
    //1.如果选中的个数为0，直接退出函数，提示选择字典删除
    if(length_1 ==0 ){
        layer.alert("请选中需要删除的字典")
        return ;
    }
    //如果有元素需要被删除
    else{
        if(!confirm("您确认要删除下列字典?")){//点取消也退出函数
            return;
        }
        //第二种方式，以数组的方式去提交。后台用string接收
        var values = [];
        $("[name=&#39;dictionaryCheckbox&#39;]:checked").each(function (i) {//i代表索引
            values[i]=$(this).val();
        })
        $.post(contextPath+&#39;/dictionary/deleteDictBatch.do&#39;,{dictionaryIds:values.toString()},function(response){
            alert(response);
            if(response == "删除成功"){
                getDictionaryTree();//查询字典树
                getDictionaryFY();//分页查询字典信息
            }
        },&#39;text&#39;)
        //删除的业务逻辑
    }
}

也可以将layer和form作为全局变量引入使用：

/**
 * @author: qlq
 * @time: 9:31
 * @description:    添加培养方案的JS
 */

/**
 * 一次性自调函数初始化两个全局变量
 */
var lyer,form;
(function () {
    layui.use([&#39;layer&#39;,&#39;form&#39;],function () {
        layer=layui.layer,form=layui.form;
    })
})();

/**
 * 页面加载完成后执行一些函数
 */
$(function () {
    layer.msg("消息框")
});


/**********S   *****************/

相关推荐：layui

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 Berkaitan

Bagaimana saya menggunakan modul aliran LAYUI untuk menatal tak terhingga?Mar 18, 2025 pm 01:01 PM

Artikel ini membincangkan menggunakan modul aliran Layui untuk menatal tak terhingga, meliputi persediaan, amalan terbaik, pengoptimuman prestasi, dan penyesuaian untuk pengalaman pengguna yang dipertingkatkan.

Bagaimanakah saya menggunakan modul elemen LAYUI untuk membuat tab, akordion, dan bar kemajuan?Mar 18, 2025 pm 01:00 PM

Butir artikel bagaimana menggunakan modul elemen LAYUI untuk membuat dan menyesuaikan elemen UI seperti tab, akordion, dan bar kemajuan, menonjolkan struktur HTML, permulaan, dan perangkap umum untuk mengelakkan.

Bagaimanakah saya menyesuaikan penampilan dan tingkah laku modul Carousel Layui?Mar 18, 2025 pm 12:59 PM

Artikel ini membincangkan modul Carousel Layui, memberi tumpuan kepada pengubahsuaian CSS dan JavaScript untuk penampilan dan tingkah laku, termasuk kesan peralihan, tetapan autoplay, dan menambah kawalan navigasi tersuai.

Bagaimanakah saya menggunakan modul Carousel Layui untuk membuat slider imej?Mar 18, 2025 pm 12:58 PM

Artikel ini menggunakan modul Carousel Layui untuk slider imej, memperincikan langkah -langkah untuk persediaan, pilihan penyesuaian, melaksanakan autoplay dan navigasi, dan strategi pengoptimuman prestasi.

Bagaimana saya mengkonfigurasi modul muat naik LAYUI untuk menyekat jenis dan saiz fail?Mar 18, 2025 pm 12:57 PM

Artikel ini membincangkan mengkonfigurasi modul muat naik Layui untuk menyekat jenis dan saiz fail menggunakan sifat Accept, Exts, dan Saiz, dan menyesuaikan mesej ralat untuk pelanggaran.

Bagaimanakah saya menggunakan modul Layui's Layer untuk membuat kotak modal dan kotak dialog?Mar 18, 2025 pm 12:46 PM

Artikel ini menerangkan cara menggunakan modul Layui's Layer untuk membuat kotak modal dan kotak dialog, memperincikan persediaan, jenis, penyesuaian, dan perangkap umum untuk dielakkan.

See all articles