基于layui内置模块(element常用元素的操作)


Posted in Javascript onSeptember 20, 2019

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

基于layui内置模块(element常用元素的操作)

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

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

基于layui内置模块(element常用元素的操作)

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

基于layui内置模块(element常用元素的操作)

实现效果的代码如下:

<!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" rel="external nofollow" >
<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:;" rel="external nofollow" >解决方案</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常用元素的操作) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 #Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 #Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 #Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 #Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 #Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 #Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 #Javascript
You might like
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php动态函数调用方法
2015/05/21 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
jQuery使用方法
2017/02/04 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
聊聊Python中的pypy
2018/01/12 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python用for循环求和的方法总结
2019/07/08 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python如何对齐字符串
2020/07/30 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
介绍一下内联、左联、右联
2013/12/31 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
村级环境卫生整治方案
2014/05/04 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
小学教师党员承诺书
2015/04/27 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android