《layui宇宙版教程》：常用element元素操作

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.21 常用element元素操作

element组件包含导航，选项卡，进度条，面板。这些element功能的开启只需要加载element模块即会自动完成，不用跟其它模块一样为某一个功能而去调用一个方法。本章节介绍使用Layui提供的API操作element组件。

模块加载名称：element。

1.21.1 基本使用

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</ul>

</div>

var element = layui.element;

//一些事件监听

element.on('tab(demo)', function(data) {

var mydata = data;

console.log(data);

var test = "testValue";

});

</script>

</body>

</html>

运行结果如图1-xx所示。

《layui宇宙版教程》：常用element元素操作

1.21.2 预设元素属性

通过自定义元素属性来作为元素的功能参数，它们一般配置在容器外层，例如：

element模块支持的元素属性如图1-xx所示。

《layui宇宙版教程》：常用element元素操作

1.21.3 基础方法

基础方法允许在外部主动对元素进行操作。

1.21.3.1 方法var element = layui.element;

返回的element变量为该实例的对象，携带一些用于元素操作的基础方法。

测试代码如下：

var element = layui.element;

</script>

1.21.3.2 方法element.on(filter, callback);

用于元素的事件监听。

语法：element.on('event(过滤器值)', callback);

element模块在layui事件机制中注册了element模块事件，目前element模块所支持的事件名称如图1-xx所示。

《layui宇宙版教程》：常用element元素操作

所以当使用layui.onevent()自定义事件时，请勿与上面系统提供的事件名称相同。

默认情况下，事件所监听的是全部的元素，但如果只想监听某一个元素，使用事件过滤器即可，例如：

结合javascript代码：

element.on('tab(test)', function(data){

console.log(data);

});

1.21.3.2.1 监听选项卡切换tab

tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</ul>

</div>

var element = layui.element;

element.on('tab(mytab)', function(data) {

console.log(this); //当前Tab标题所在的原始DOM元素

console.log(data.index); //得到当前Tab的所在下标

console.log(data.elem); //得到当前的Tab大容器

});

</script>

</body>

</html>

1.21.3.2.2 监听选项卡删除tabDelete

tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

<li>用户基本管理</li>

<li>全部历史商品管理文字长一点试试</li>

</ul>

</div>

var element = layui.element;

element.on('tabDelete(mytab)', function(data) {

console.log(this); //当前Tab标题所在的原始DOM元素

console.log(data.index); //得到当前Tab的所在下标

console.log(data.elem); //得到当前的Tab大容器

});

</script>

</body>

</html>

1.21.3.2.3 监听导航菜单的点击nav

当点击导航父级菜单和二级菜单时触发，回调函数返回所点击菜单的DOM对象。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</dl>

</li>

</ul>

var element = layui.element;

element.on('nav(mynav)', function(elem) {

console.log(elem); //得到当前点击的DOM对象

});

</script>

</body>

</html>

1.21.3.2.4 监听折叠面板collapse

当对折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</div>

</div>

</div>

var element = layui.element;

element.on('collapse(mycollapse)', function(data) {

console.log(data.show); //得到当前面板的展开状态，true或者false

console.log(data.title); //得到当前点击面板的标题区域DOM对象

console.log(data.content); //得到当前点击面板的内容区域DOM对象

});

</script>

</body>

</html>

1.21.3.3 方法element.tabAdd(filter, options);

用于新增一个tab选项标签。

参数filter：tab元素的lay-filter="value"过滤器的值（value）。

参数options：设置options参数对象，目前支持的options选项如下示例：

element.tabAdd('demo', {

title: '选项卡的标题',

content: '选项卡的内容', //支持传入html

id: '选项卡标题的lay-id属性值'

});

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</ul>

</div>

var element = layui.element;

$(document).ready(function() {

$("#addTabPage").click(function() {

element.tabAdd('mytab', {

title: '选项卡的标题',

content: '选项卡的内容', //支持传入html

id: '8888'

});

</script>

</body>

</html>

1.21.3.4 方法element.tabDelete(filter, layid);

用于删除指定的tab选项。

参数filter：tab元素的lay-filter="value"过滤器的值（value）。

参数layid：选项卡标题列表的lay-id属性值。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</ul>

</div>

var element = layui.element;

$(document).ready(function() {

$("#removeTabPage").click(function() {

element.tabDelete('mytab', '444');

//删除 lay-id="444" 的这一项

});

</script>

</body>

</html>

1.21.3.5 方法element.tabChange(filter, layid);

用于外部切换到指定的tab标签页上，示例代码如下：

element.tabChange('demo', 'layid'); //切换到lay-id="yyy"的这一项

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</ul>

</div>

var element = layui.element;

$(document).ready(function() {

$("#addTabPage").click(function() {

element.tabAdd('mytab', {

title: '选项卡的标题',

content: '选项卡的内容', //支持传入html

id: '8888'

});

element.tabChange('mytab', '8888');

});

</script>

</body>

</html>

1.21.3.6 方法element.progress(filter, percent);

用于动态改变进度条百分比，示例代码如下：

element.progress('demo', '30%');

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

</div>

var element = layui.element;

$(document).ready(function() {

$("#setprogress").click(function() {

element.progress('myprogress',"99%");

});

</script>

</body>

</html>

1.21.4 更新渲染

跟表单元素一样，很多时候页面元素可能是动态生成的，这时element的相关功能将不会对其有效，所以必须手工执行element.render(type, filter);方法。

第一个参数type是元素的type类型，可选。默认对全部类型的元素进行一次更新，可局部刷新的type值如图1-xx所示。

《layui宇宙版教程》：常用element元素操作

使用如下代码进行渲染：

element.render('nav');

第二个参数filter是元素的lay-filter=""值，可以借助该参数完成对某一个元素进行渲染，而不是全部。示例代码如下：

【HTML】

…

</div>

…

</div>

【JavaScript】

//比如当对导航菜单test1动态插入了二级菜单，这时需要重新去对它进行渲染

element.render('nav', 'test1');

//对lay-filter="test1"所在nav导航重新渲染。

//……

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layout 后台大布局 - Layui</title>

</head>

<body>

var element = layui.element;

function testMethod1(){

var progressObject=$('<div class="layui-progress"><div class="layui-progress-bar" lay-percent="10%"></div></div>');

$("body").append(progressObject);

$("body").append("<br/><br/>");

}

function testMethod2(){

var progressObject=$('<div class="layui-progress" lay-filter="myprogress"><div class="layui-progress-bar" lay-percent="90%"></div></div>');

$("body").append(progressObject);

element.render('progress', 'myprogress');

}

function testMethod3(){

element.render('progress');

}

</script>

<br />

<br />

<br />

</body>

</html>

如果tab，nav，breadcrumb，progress，collapse这5个组件是动态创建出来的，就需要进行更新render渲染。

《layui宇宙版教程》：常用element元素操作

相关推荐