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

2024-10-18 09:42:11

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

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

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

下面是对监听事件的简单使用，效果图如下（注意console控制台的输出变化）：

实现效果的代码如下：

<!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常用元素的操作) 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

基于Layui自定义模块的使用方法详解

layui是一个极其不错的前端UI框架.是后端程序员的福音.总之如果你是一个后端开发者.如果你苦于你的界面"惨不忍睹".选择layui来开发是个极好的选择. 之前的项目也有使用过layui.只是没有过多的关注其框架本身.对于项目上.拿来即用即可! 为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 我也是一个极其懒惰的人.总是想办法让代码可重用根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称我现在做的是登录功能.因此我的扩展模块名叫 login 使用
layui.use模块外部使用其内部定义的js封装函数方法

用途:常用于监听输入框(其内部不提供监听函数). 用法:需要在 use 中定义 window 函数供外部引用. // 调用成功 <div class="layui-form-item " > <label class="layui-form-label">原密码</label> <div class="layui-input-block"> <input type="text&quo
使用layui定义一个模块并使用的例子

在使用layui的过程,有几个方法需要被多个js引用,所以我按照文档,自定义了一个layui的模块,下面实现过程先定义一个模块 //定义模块 layui.define(['form'], function(exports){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 var $ = layui.$; var obj = { changeParentPlace: function (parentId,tagId,levelPlace) {
基于layui内置模块(element常用元素的操作)

常用元素操作是个什么鬼,从官方解释简单来说就是在页面中有一些动态的效果,当然不是我们说的动态网页那个动态,这些动态效果呢,就是通过我们去加载element模块以后,默认为页面的这些元素添加的一些动态效果,比如layui文档顶部的导航下部的小滑块的效果,看下图: 当然不仅仅包含这些,还有其他的一些比如tab的切换.折叠面板的展开与合并.二级导航的的展开与合并等等. 默认效果当然不用多说,只要我们能实现element元素的加载,也就是一步搞定的事情,重点还是看看element中一些常用的方法和简单的
基于LayUI实现前端分页功能的方法

一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte
基于Java中最常用的集合类框架之HashMap(详解)

一.HashMap的概述 HashMap可以说是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构. HashMap是基于哈希表的Map接口实现的,此实现提供所有可选的映射操作.存储的是对的映射,允许多个null值和一个null键.但此类不保证映射的顺序,特别是它不保证该顺序恒久不变. 除了HashMap是非同步以及允许使用null外,HashMap 类与 Hashtable大致相同. 此实现假定哈希函数将元素适当地分布在各桶之间,可为基本操作(get 和 put)提供稳定的性
基于layui框架响应式布局的一些使用详解

写在前面的因为公司的需要,这几天学习了layui框架,稍微有一些心得.介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍. 官网地址:https://www.layui.com/doc/element/layout.html 简单的布局 layui的响应式使用十分简单,虽然官网写了很多很详细,但某种意义上增加了新手学习的难度和劝退的可能.但其实总结下来如何使用响应式布局就几个步骤: 第一,在第一个div设置一个布局类 ,通常我只使用两个类,分别是:layui-contain
基于Python对数据shape的常见操作详解

这一阵在用python做DRL建模的时候,尤其是在配合使用tensorflow的时候,加上tensorflow是先搭框架再跑数据,所以调试起来很不方便,经常遇到输入数据或者中间数据shape的类型不统一,导致一些op老是报错.而且由于水平菜,所以一些常用的数据shape转换操作也经常百度了还是忘,所以想再整理一下. 一.数据的基本属性求一组数据的长度 a = [1,2,3,4,5,6,7,8,9,10,11,12] print(len(a)) print(np.size(a)) 求一组数据的s
基于java构造方法Vector遍历元素源码分析

(注意:本文基于JDK1.8) 前言任何一个容器类对象用于持有元素后,总是需要遍历元素的,即挨个去访问每个元素1次,而遍历元素,除了常规的依赖于数组对象的下标之外,更常用的是封装好的迭代器,今天就来学习Vector中的迭代器是如何设计的,与迭代器相关的方法有: iterator() listIterator() listIterator(int index) 3个Vector中的定义的方法,均会返回一个迭代器对象--简单说说这3个方法的来历 iterator()方法的来历 iterator()
jQuery元素属性操作实例(设置、获取及删除元素属性)

本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex
Nodejs基于LRU算法实现的缓存处理操作示例

本文实例讲述了Nodejs基于LRU算法实现的缓存处理操作.分享给大家供大家参考,具体如下: LRU是Least Recently Used的缩写,即最近最少使用页面置换算法,是为虚拟页式存储管理服务的,是根据页面调入内存后的使用情况进行决策了.由于无法预测各页面将来的使用情况,只能利用"最近的过去"作为"最近的将来"的近似,因此,LRU算法就是将最近最久未使用的页面予以淘汰. 可以用一个特殊的栈来保存当前正在使用的各个页面的页面号.当一个新的进程访问某页面时,便将
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元
jQuery选择器总结之常用元素查找方法

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $

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

相关推荐

随机推荐