基于layui的内置模块(元素公共元素的操作)

常见元素的操作是什么鬼？从官方的解释来看，页面上有一些动态效果，肯定不是动态网页。这些动态效果是我们加载元素模块后，页面的这些元素默认添加的一些动态效果，比如layui文档顶部导航底部的小滑块的效果，见下图：

当然，不仅仅包括这些，还有其他的，比如tab切换，折叠面板的展开和合并，二次导航的展开和合并等等。

默认效果不用多说，只要我们能加载element元素，也就是一步到位，关键是看一些常用的方法和element的简单用法。方法总结如下：

下面是监控事件的简单使用，效果图如下(注意控制台控制台的输出变化):

实现该效果的代码如下：

！DOCTYPE html meta charset=' utf-8 ' html head script type=' application/JavaScript ' src=' http : jquery-3 . 2 . 1 . js '/script link rel='样式表' href=' layui/CSS/layui . CSS ' rel=' external no follow ' script type=' application/JavaScript ' src=' http : layui/lay/dest/layui . all . js '/script/head dydiv class='margin-top : 20px ' ul class=' layui-nav ' lay-filter=' big data ' Li class=' layui-nav-item ' a href='最新活动/a/Lili class=' layui-nav-item ' layui-this ' a href=' product/a/Lili class=' layui-nav-item ' href=' big data/a/Lili class=' layui-nav-item ' a href=' JavaScript 3360；'Rel='外部nofollow '解决方案/adl class='layui-nav-child '！-二级菜单-DDA href='移动模块/a/dddda href='背景模板/a/dddda href='电子商务平台/a/DD/dl/Lili class=' layui-nav-item ' a href='社区/a/Li/ul/。div class=' layui-tab ' lay-filter=' test ' ul class=' layui-tab-title ' Li class=' layui-this '网站设置/丽丽用户管理/丽丽权限分配/丽丽商品管理/丽丽订单管理/Li/ul div class=' layui-tab-内容宽度： 100%；'Div class='layui-tab-item '网站设置/divdiv class='layui-tab-item '用户管理/divdiv class='layui-tab-item '权限分配/Divdiv class='layui-tab-item '商品管理/Div class=' layui-tab-item '订单管理/div/div/div div class=' layui-main ' style=' margin-bottom : 30px；margin-top : 20px ' div class=' layui-collapse ' lay-filter=' collapse filter ' lay-accordion div class=' layui-colla-item ' H2 class=' layui-colla-title '杜甫/H2div class=' la yui-colla-content la yui-show '杜甫的思想核心是儒家的仁政，他有“事君尧舜，然后使风俗纯正”的宏伟抱负。虽然杜甫在世时名声并不显赫，但他后来成名了，对中国文学和日本文学都产生了深远的影响。现存杜甫诗歌约1500首，大部分收藏于《杜工部集》。/div/她的父亲李有丰富的藏书。她小时候在良好的家庭环境中打下了文学基础。婚后，她与傅、赵明诚合作，收集整理书画题字。当中国的游牧民族进入中原时，他们生活在南方，处于孤独的境地。前期多写自己的闲适生活，后期哀叹人生经历，情绪多愁善感。在形式上善用写生技法，创造自己的方式，使语言清晰优美。/div/他对“五四”后中国社会思想文化的发展影响很大，在世界文坛，尤其是朝鲜、日本的思想文化领域享有盛名。他被誉为“20世纪东亚文化版图上占据最大版图的作家”。

/div/div/div class=' layui-main ' style=' margin-bottom : 30px；margin-top : 20px ' div class=' layui-progress layui-progress-big ' lay-filter=' demo ' lay-show percent=' true ' div class=' layui-progress-bar layui-BG-blue ' lay-percent=' 20% '/div/div class=' site-demo-button ' style=' margin-top : 20px；边距-底部：0”按钮类=“layui-BTN站点-演示-活动”数据类型=“SetPercent”设置50%/按钮！-button class=' layui-BTN站点-演示-活动'数据类型=' loading '模拟正在加载/button//divscriptlayui。使用(' element '，function () {//实例化element var element=layui。element()；//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果元素。init()；//导航条点击监听element.on('nav(bigData)'，function(elem){ console。日志(elem)；});//选项卡切换监听element.on('tab(test)')，function(data){ console。日志(数据)；});//手风琴折叠面板开启关闭监听元素。on(' collapseFilter(collapseFilter)')，function(data){ console。日志(数据。显示)；控制台。日志(数据。标题)；控制台。日志(数据。内容)})；//触发的事件var active={ set percent : function(){//设置50%进度element.progress('demo '，' 50%')}}//点击事件的监听$('.网站-演示-活动')。on('click '，function(){ var othis=$(this)；定义变量类型=$(这个).数据(“type”)；活动[类型]?活动[类型]。拨打(this，othis): " "；});})/脚本/正文/html内置模块元素就简单学习这么多，更多学习请参看官方的文档：http://www .拉威。com/doc/modules/element。html # on

以上基于layui(element的公共元素的操作)的内置模块是边肖分享给大家的全部内容，希望能给大家一个参考和支持。