基于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源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
理解javascript封装
Feb 23 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
js制作支付倒计时页面
Oct 21 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
python实现的希尔排序算法实例
2015/07/01 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
环境工程专业个人求职信
2013/12/05 职场文书
初级会计求职信范文
2014/02/15 职场文书
浪费资源的建议书
2014/03/12 职场文书
北京申奥口号
2014/06/19 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
雷锋观后感
2015/06/10 职场文书
汽车销售员工作总结
2015/08/12 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL