current position：Home>Layui built-in module (element common element operation)

Layui built-in module (element common element operation)

2022-04-29 12:48:33【Yang Zhizhong】

What the hell is a common element operation , The official explanation is simply that there are some dynamic effects in the page , Of course, it's not what we call dynamic web pages , These dynamic effects , It is through us to load element After the module , Some dynamic effects added to these elements of the page by default , such as layui The effect of the small slider at the bottom of the navigation at the top of the document , Look at the picture below ：


      Of course, it's not just these , There are others, such as tab Handoff 、 Unfolding and merging of folding panels 、 Expansion and merging of secondary navigation, etc .


The default effect, of course, goes without saying , As long as we can achieve element Loading of elements , That is, things that can be done in one step , The point is to see element Some common methods and simple use in , The methods are summarized as follows ：

 

The following is a simple use of listening Events , The renderings are as follows （ Be careful console The output of the console changes ）：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <script type="application/javascript" src="jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="application/javascript" src="layui/lay/dest/layui.all.js"></script>
</head>
<body>
    <div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
            <ul class="layui-nav" lay-filter="bigData">
                <li class="layui-nav-item"><a href=""> Latest events </a></li>
                <li class="layui-nav-item layui-this"><a href=""> product </a></li>
                <li class="layui-nav-item" href=""> big data </a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;"> Solution </a>
                    <dl class="layui-nav-child"> <!--  Two level menu  -->
                        <dd><a href=""> Mobile module </a></dd>
                        <dd><a href=""> Background template </a></dd>
                        <dd><a href=""> Electronic business platform </a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=""> Community </a></li>
            </ul>
    </div>
    <div class="layui-main" style="margin-bottom: 30px;">
        <div class="layui-tab" lay-filter="test">
            <ul class="layui-tab-title">
                <li class="layui-this"> Website setup </li>
                <li> User management </li>
                <li> Permission assignment </li>
                <li> Commodity management </li>
                <li> Order management </li>
            </ul>
            <div class="layui-tab-content" style=" height: 120px;width: 100%;">
                <div class="layui-tab-item"> Website setup </div>
                <div class="layui-tab-item"> User management </div>
                <div class="layui-tab-item"> Permission assignment </div>
                <div class="layui-tab-item"> Commodity management </div>
                <div class="layui-tab-item"> Order management </div>
            </div>
        </div>
    </div>
    <div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
        <div class="layui-collapse" lay-filter="collapseFilter" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title"> Du Fu </h2>
                <div class="layui-colla-content layui-show">
                     The core of Du Fu's thought is the benevolent government thought of Confucianism , He has “ To you, Yao and shun , Make the custom simple again ” The grand ambition of . Although Du Fu was not famous in his lifetime , But then it became famous ,
                     It has a profound influence on both Chinese literature and Japanese literature . Du Fu had an appointment together 1500 The poem has been preserved , Most of them focus on 《 Du Gong Bu Ji 》.
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title"> Li qingzhao </h2>
                <div class="layui-colla-content">
                     Li Qingzhao was born in a scholarly family , Early life was abundant , His father Li Gefei is rich in books , When she was a child, she laid a literary foundation in a good family environment . After getting married, Zhao Mingcheng and his husband worked together to collect and sort out calligraphy and painting gold and stones .
                     When Jin Bing entered the Central Plains , Live in the South , In a lonely situation . The words written , Write more about his leisurely life in the early stage , Later, he lamented his life experience , Sentimental mood . Good at line drawing in form , Create your own way , The language is beautiful .
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title"> Du Fu </h2>
                <div class="layui-colla-content">
                     Lu Xun spent his whole life in literary creation 、 Literary criticism 、 Thought research 、 The study of literary history 、 translate 、 The introduction of art theory 、 The introduction of basic science and the collation and research of ancient books have made great contributions .
                     He had a great influence on the development of Chinese social ideology and culture after the May 4th movement , Famous in the world of literature , Especially in Korea 、 Japanese ideological and cultural field has an extremely important position and influence , Known as the “ Writers who occupy the largest territory on the East Asian cultural map in the 20th century ”.
                </div>
            </div>
        </div>
    </div>
    <div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
        <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="20%"></div>
        </div>
        <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
            <button class="layui-btn site-demo-active" data-type="setPercent"> Set up 50%</button>
<!--            <button class="layui-btn site-demo-active" data-type="loading"> simulation loading</button>-->
        </div>
    </div>
    <script>
        layui.use('element',function () {
            // Instantiation element
            var element = layui.element();
            // Initialize dynamic elements , Some dynamically generated elements are initialized if they are not set , There will be no default dynamic effects 
            element.init();
            // Click listen on the navigation bar 
            element.on('nav(bigData)',function (elem) {
                console.log(elem);
            });
            //tab Switch monitoring 
            element.on('tab(test)',function (data) {
                console.log(data);
            });
            // The accordion folding panel opens and closes 
            element.on('collapse(collapseFilter)',function (data) {
                console.log(data.show);
                console.log(data.title);
                console.log(data.content)
            });
            // Triggered events 
            var active = {
                setPercent: function () {
                    // Set up 50% speed of progress 
                    element.progress('demo', '50%')
                }
            }
            // Click event monitoring 
            $('.site-demo-active').on('click', function(){
                var othis = $(this);
                var type = $(this).data('type');
                active[type] ? active[type].call(this, othis) : '';
            });
        })
    </script>
</body>
</html>

copyright notice
author[Yang Zhizhong],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291120188914.html

The sidebar is recommended

guess what you like

Random recommended