基于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 相关文章推荐
农历与西历对照
Sep 06 Javascript
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php实现头像上传预览功能
2017/04/27 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
js实现无缝轮播图
2020/03/09 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python的类方法和静态方法
2014/12/13 Python
Python计算字符宽度的方法
2016/06/14 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python学习笔记之多进程
2020/08/06 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
小学生自我鉴定
2013/10/12 职场文书
酒店端午节促销方案
2014/02/18 职场文书
特教教师先进事迹
2014/05/21 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server