当前博客:26-快码FOF中文编程layui教学-组件:Tab选项卡动态操作

178 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

除了静态选项卡之外,layui还内置了选项卡的动态操作,新增选项卡,删除选项卡,跳转选项卡等。

这是选项卡操作的代码示例:

<区块 类名="lay-选项卡 lay-选项卡-卡片风" lay-过滤器="演示">
	<无序列表 类名="lay-选项卡-标题">
		<列表项 类名="lay-选中" lay-id="111">网站设置</列表项>
		<列表项 lay-id="222">商品管理</列表项>
		<列表项 lay-id="333">订单管理</列表项>
	</无序列表>
	<区块 类名="lay-选项卡-内容">
		<区块 类名="lay-选项卡-项目 lay-显示">内容1</区块>
		<区块 类名="lay-选项卡-项目">内容2</区块>
		<区块 类名="lay-选项卡-项目">内容3</区块>
	</区块>
</区块>
<脚本>
	// 切换选项卡
	lay_元素.选项卡切换("演示", "222");
	// 添加选项卡项目
	lay_元素.选项卡添加("演示", {
		[lay_元素.选项卡配置.id]: "444",
		[lay_元素.选项卡配置.标题]: "xx管理",
		[lay_元素.选项卡配置.内容]: "内容4",
	});
	// 5秒后删除选项卡项目
	倒计时执行(() => {
		lay_元素.选项卡删除("演示", "333");
	}, 5000);
</脚本>
Markup

代码效果展示:

知识点:

1、使用js操作选项卡,必须在选项卡加上属性 lay-筛选器;

2、选项卡选项都要设置属性 lay-id ,js才能对选项卡的选项操作;

 

点击此处跳转案例下载:点击下载lay-选项卡动态操作实例

26-快码FOF中文编程layui教学-组件:Tab选项卡动态操作