您的位置：首页 > 产品设计 > UI/UE

layui内置模块（element常用元素操作）

2017-06-21 13:28 405 查看
    常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果,看下图：



     当然不仅仅包含这些，还有其他的一些比如tab的切换、折叠面板的展开与合并、二级导航的的展开与合并等等。

默认效果当然不用多说，只要我们能实现element元素的加载，也就是一步搞定的事情，重点还是看看element中一些常用的方法和简单的使用，方法总结如下：



   下面是对监听事件的简单使用，效果图如下（注意console控制台的输出变化）：



 

     实现效果的代码如下：

<!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="">最新活动</a></li>

<li class="layui-nav-item layui-this"><a href="">产品</a></li>

<li class="layui-nav-item" href="">大数据</a></li>

<li class="layui-nav-item">

<a href="javascript:;">解决方案</a>

<dl class="layui-nav-child"> <!-- 二级菜单 -->

<dd><a href="">移动模块</a></dd>

<dd><a href="">后台模版</a></dd>

<dd><a href="">电商平台</a></dd>

</dl>

</li>

<li class="layui-nav-item"><a href="">社区</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">网站设置</li>

<li>用户管理</li>

<li>权限分配</li>

<li>商品管理</li>

<li>订单管理</li>

</ul>

<div class="layui-tab-content" style=" height: 120px;width: 100%;">

<div class="layui-tab-item">网站设置</div>

<div class="layui-tab-item">用户管理</div>

<div class="layui-tab-item">权限分配</div>

<div class="layui-tab-item">商品管理</div>

<div class="layui-tab-item">订单管理</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">杜甫</h2>

<div class="layui-colla-content layui-show">

杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，

对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">李清照</h2>

<div class="layui-colla-content">

李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。

金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">杜甫</h2>

<div class="layui-colla-content">

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。

他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。

</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">设置50%</button>

<!--            <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>-->

</div>

</div>


<script>

layui.use('element',function () {


//实例化element

var element = layui.element();


//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果

element.init();


//导航条点击监听

element.on('nav(bigData)',function (elem) {

console.log(elem);


});


//tab切换监听

element.on('tab(test)',function (data) {

console.log(data);

});


//手风琴折叠面板开启关闭监听

element.on('collapse(collapseFilter)',function (data) {

console.log(data.show);

console.log(data.title);

console.log(data.content)

});


//触发的事件

var active = {

setPercent: function () {

//设置50%进度

element.progress('demo', '50%')

}

}


//点击事件的监听

$('.site-demo-active').on('click', function(){

var othis = $(this);

var type = $(this).data('type');


active[type] ? active[type].call(this, othis) : '';

});

})


</script>

</body>

</html>


    

    内置模块element就简单学习这么多，更多学习请参看官方的文档：http://www.layui.com/doc/modules/element.html#on
 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                layui
                                                element
                                                常用元素操作
                                                动态效果
                                                前端
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航