基于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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue实现分页栏效果
Jun 28 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
微信小程序实现倒计时功能
Nov 19 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语法(4)
2006/10/09 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
浅谈node的事件机制
2017/10/09 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
单位授权委托书范本
2014/09/26 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2014年技术部工作总结
2014/12/12 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS