layui框架学习(44:常用元素操作模块)

  layui中的常用元素操作模块element主要支撑页面元素实现layui样式效果(如选项卡交互、导航交互等,只需加载element模块即可),同时提供函数处理元素事件、操作选项卡及进度条等元素,便于通过代码操作页面元素。
  element模块中的init和render函数用于动态刷新所有或者指定类型、指定元素的样式,主要是在动态调整元素内容后重新刷新样式。支持的页面元素类型包括tab(选项卡)、nav(导航)、breadcrumb(面包屑导航)、progress(进度条)、collapse(折叠面板),而filter指设置了lay-filter的页面元素,用于刷新特定的元素样式。

	element.init(type, filter) 
	element.render(type, filter) 

  element模块支持调用on函数(element.on(filter, callback))处理指定类型、指定事件的事件处理函数,其中第一个输入参数的内容形式为event(filter),目前event仅支持tab、tabDelete、nav、collapse等四种事件,filter则为设置了lay-filter的页面元素,filter为空响应的是页面中所有元素的event事件,不为空则是响应指定元素的event事件。on函数的使用示例详见参考文献2,在此不再赘述。
  element模块支持调用tabAdd、tabDelete、tabChange函数实现新增选项卡、删除选项卡和切换选项卡,函数形式如下所示。layid是选项卡的唯一标识,作用类似于Winform中tab控件中tab页的name属性。

	element.tabAdd(filter, options);
	element.tabDelete(filter, layid);
	element.tabChange(filter, layid);

  element模块支持调用progress函数设置指定进度条的进度值,函数形式为element.progress(filter, percent)。
  由于element模块以函数为主,不存在基础参数,本文主要学习并记录element模块中函数用途及参数形式,未在文章中测试模块用法(前面文章中有提及,在此未重复说明,需要的话请见参考文献2-3)。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值