layui 的常用元素操作 element

“页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。”——引 自layui文档
可以总结为：layui.js通过 element来控制管理一些常用的页面元素，如tab,nav,breadcrumb(面包屑),progress(进度条),collapse(折叠面板)等
具体如下：

1.定义元素类型、选择名

<div class="layui-tab" lay-allowClose="true" lay-filter="demo">…</div>   
<span class="layui-breadcrumb" lay-separator="|"></span>

【layui-tab】、【layui-breadcrumb】元素类型 【lay-filter=“demo”】 选择名

2.加载element 监听事件

layui.use('element', function(){
  var element = layui.element;
  
  //一些事件监听
  element.on('tab(demo)', function(data){
    console.log(data);
  });
});

事件监听用： element.on(filter, callback); 这里的filter 即：类型（选择名） / tab(demo)

监听选项卡切换
element.on(‘tab(filter)’, function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
监听选项卡删除
element.on(‘tabDelete(filter)’, function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});

监听导航菜单的点击
element.on(‘nav(filter)’, function(elem){
console.log(elem); //得到当前点击的DOM对象
});

//监听折叠面板
element.on(‘collapse(filter)’, function(data){
console.log(data.show); //得到当前面板的展开状态，true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
//动态操作进度条

上述是一个已经设置了过滤器（lay-filter="demo"）的进度条 现在你只需要在某个事件或者语句中执行方法：element.progress('demo', '50%'); 即可改变进度 #### 3.常用方法 ``` //添加tab卡 element.tabAdd(filter, options);

			element.tabAdd('demo', {
			  title: '选项卡的标题'
			  ,content: '选项卡的内容' //支持传入html
			  ,id: '选项卡标题的lay-id属性值'
			});  

//删除 tab
element.tabDelete(filter, layid);

		element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项  

//切换到选项卡
element.tabChange(filter, layid);

//动态改变进度条
element.progress(filter, percent);

//用于绑定自定义 Tab 元素（即非 layui 自带的 tab 结构）。
该方法为 layui 2.1.6 新增 
参数options：设定可选值的对象，目前支持的选项如下述示例：

		//HTML
			<ul id="tabHeader">
			  <li>标题1</li>
			  <li>标题2</li>
			  <li>标题3</li>
			</ul>
			<div id="tabBody">
			  <div class="xxx">内容1</div>
			  <div class="xxx">内容2</div>
			  <div class="xxx">内容4</div>
			</div>
			              
			//JavaScript              
			element.tab({
			  headerElem: '#tabHeader>li' //指定tab头元素项
			  ,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
			});       

4.更新渲染

element.init(type, filter)
//注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代