layui选项卡的使用

最新推荐文章于 2023-07-12 19:27:06 发布

zhouzhou_98

最新推荐文章于 2023-07-12 19:27:06 发布

阅读量7.9k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/zhouzhou_98/article/details/101910872

版权

layui 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

风格说明

默认风格只用加layui-tab

简洁风格 layui-tab-brief

卡片风格 layui-tab-card

相关样式

|--layui-tab 代表一个选项卡

|--layui-tab-title代表卡片的头

|-- layui-this 启动选中

|-- layui-tab-content 代表卡片的内容包装体

|-- layui-tab-item 具体的卡片内容

|-- layui-show 启动显示

相关属性

lay-allowclose是否启动关闭按钮

lay-filter="demo" layui使用的可以找到元素的属性

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<legend>默认风格的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

<br>2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<button type="button" class="layui-btn" id="add">添加一个Tab</button>

<button type="button" class="layui-btn " id="change">切换用户管理</button>

<button type="button" class="layui-btn" id="delete">删除商品管理</button>

<button type="button" class="layui-btn" id="deleteAll">删除所有tab</button>

</div>

<legend>简单风格的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

<br>2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<legend>卡片风格的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

<br>2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

layui.use(['element','jquery'],function(){

var $=layui.jquery;

var element=layui.element;

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

element.tabAdd('demo', {

title: '选项卡的标题'

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

});

})

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

element.tabChange('demo', '2');

})

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

element.tabDelete("demo", "4");

})

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

var lis=$(".mydemo");

$.each(lis,function(index,item){

var layid=item.getAttribute("lay-id");

//alert(layid);

element.tabDelete("demo", layid);

});

})

});

</script>

</body>

</html>

<%--

Created by IntelliJ IDEA.

User: Lenovo

Date: 2019/10/1

Time: 20:44

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

</head>

<body>

<legend>默认风格的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<legend>简约风格的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<legend>卡片风格的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<legend>动态删的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<legend>动态增删改的Tab</legend>

</fieldset>

</ul>

1. 高度默认自适应，也可以随意固宽。

2. Tab进行了响应式处理，所以无需担心数量多少。

</div>

</div>

<i class="layui-icon"></i>添加一个Tab

</button>

<i class="layui-icon"></i>切换用户管理

</button>

<i class="layui-icon"></i>删除商品管理

</button>

<i class="layui-icon"></i>删除所有Tab

</button>

</div>

layui.use(['element','jquery'],function () {

var $=layui.jquery;

var element=layui.element;

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

element.tabAdd('demo', {

title: '选项卡的标题'

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

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

});

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

element.tabChange('demo', '2');

});

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

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

});

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

var list= $(".mydemo");

$.each(list,function (index,item) {

var layid=item.getAttribute("lay-id");

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

})

});

</script>

</body>

</html>

效果如下：

zhouzhou_98

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
layui选项卡的使用

风格说明默认风格只用加layui-tab简洁风格 layui-tab-brief卡片风格 layui-tab-card 相关样式 |--layui-tab 代表一个选项卡|--layui-tab-title代表卡片的头...
复制链接

扫一扫