常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果,看下图：
当然不仅仅包含这些，还有其他的一些比如tab的切换、折叠面板的展开与合并、二级导航的的展开与合并等等。
默认效果当然不用多说，只要我们能实现element元素的加载，也就是一步搞定的事情，重点还是看看element中一些常用的方法和简单的使用，方法总结如下：
下面是对监听事件的简单使用，效果图如下（注意console控制台的输出变化）：
实现效果的代码如下：
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script type="application/javascript" src="https://www.jb51.net/jquery-3.2.1.js"></script> <link href="https://www.jb51.net/layui/css/layui.css" > <script type="application/javascript" src="https://www.jb51.net/layui/lay/dest/layui.all.js"></script> </head> <body> <div> <ul lay-filter="bigData"> <li><a href="">最新活动</a></li> <li><a href="">产品</a></li> <li href="">大数据</a></li> <li> <a href="javascript:;" >解决方案</a> <dl> <!-- 二级菜单 --> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li><a href="">社区</a></li> </ul> </div> <div> <div lay-filter="test"> <ul> <li>网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div> <div>网站设置</div> <div>用户管理</div> <div>权限分配</div> <div>商品管理</div> <div>订单管理</div> </div> </div> </div> <div> <div lay-filter="collapseFilter" lay-accordion> <div> <h2>杜甫</h2> <div> 杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播， 对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。 </div> </div> <div> <h2>李清照</h2> <div> 李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。 金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。 </div> </div> <div> <h2>杜甫</h2> <div> 鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。 他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。 </div> </div> </div> </div> <div> <div lay-filter="demo" lay-showPercent="true"> <div lay-percent="20%"></div> </div> <div> <button data-type="setPercent">设置50%</button> <!-- <button 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就简单学习这么多，更多学习请参看官方的文档：
以上这篇基于layui内置模块(element常用元素的操作) 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: