这篇笔记详细介绍了layui和Element UI中的组件使用，包括面板的折叠与展开，特别是手风琴折叠面板的配置；进度条的样式设置，如颜色和自定义背景颜色的方法；以及不同类型的徽章展示，如实心圆点、常规弧形和边框徽章。通过示例代码展示了如何动态控制和自定义这些组件。
<script>
/**
* 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
*
* 相关样式
* layui-tab 代表一个选项卡
* |-layui-tab-brief 代表简介风格的选项卡
* |-layui-tab-card 代表卡片风格的选项卡
* |- layui-tab-title 用于包裹选项卡的导航列表
* |— layui-this 设置默认选中的导航按钮
* |- layui-tab-content 代表包裹展示选项卡内容的标签
* |- layui-tab-item 代表每一个选项卡对应展示的内容
* |- layui-show 设置默认展示的选项卡内容，和layui-this配对
*
* 相关属性
* lay-allowclose="true" 设置选项卡可以删除(动态操作)
* lay-filter="xxx" 事件过滤器
* lay-id="xxx" 类似于id选择器，用于选中文档中某一个标签
*
* 相关方法
* 添加选项卡
* element.tabAdd("事件过滤器", {title, content, id})
* 删除选项卡
* element.tabDelete("事件过滤器", "lay-id值")
* 切换选项卡
* element.tabChange("事件过滤器", "lay-id值")
*/
layui.use(["element", "jquery"], function () {
var element = layui.element;
var $ = layui.jquery;
// 新增tab项
var index = 0;
$("#tabAdd").click(function () {
/**
* 语法：element.tabAdd("事件过滤器", {title, content, id})
*/
element.tabAdd('demo', {
title: '新选项'+ ++index //设置选项卡标题
,content: '内容'+ index // 设置选项卡内容
// 此处设置的是lay-id的属性值
,id: index //实际使用一般是规定好的id，这里以时间戳模拟下
})
});
// 删除：商品管理
$("#tabDelete").click(function () {
/**
* 语法：element.tabDelete("事件过滤器", "lay-id值")
*/
element.tabDelete("demo", "44");
});
// 切换到：用户管理
$("#tabChange").click(function () {
/**
* 语法：element.tabChange("事件过滤器", "lay-id值")
*/
element.tabChange("demo", "22");
})
});
面板
一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等 手风琴折叠面板 注意：“常规折叠面板”可以同时展开任意多个，但是“手风琴折叠面板”最多只能展示一个 另外：使用“手风琴折叠面板”相关的样式和方法“常规折叠面板”一模一样 相关属性 lay-accordion，直接写属性名即可，用于设置该面板为“手风琴折叠面板” 常规折叠面板 相关样式 layui-collapse 代表常规折叠面板 |- layui-colla-item 代表每一个卡片选项 |- layui-colla-title 用于设置卡片标题 |- layui-colla-content|layui-show 用于设置卡片展示内容|设置默认展示的内容 相关方法 用于监听面板的展开或收起状态 element.on('collapse(事件过滤器)', function(data){ layer.msg('展开状态：'+ data.show); }); 卡片面板 相关样式 layui-row 代表一行 |- layui-col-space0 -- layui-col-space30 设置面板之间的间距，取值越大，间距越大 |- layui-col-md0 -- layui-col-md12 代表每一个面板占用多少份，默认一行有12份 |- layui-card 代表每一个卡片选项 |- layui-card-header 代表卡片标题 |- layui-card-body 代表卡片展示内容
进度条
<body>
<div class="content" type="进度条">
<!--进度条默认的宽度和父元素一样宽-->
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
<div style="margin-top: 15px; width:300px;">
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-pink" lay-percent="70%"></div>
</div>
</div>
</div>
<div class="content" type="大进度条">
<div class="layui-progress layui-progress-big">
<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
</div>
<div class="content" type="显示进度比文本">
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-orange" lay-percent="20%"></div>
</div>
</div>
<div class="content" type="动态改变进度">
<div class="layui-progress layui-progress-big" lay-filter="test" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
</div>
<br><br>
<button class="layui-btn layui-btn-normal" id="loading">开始下载</button>
</div>
<script>
/**
* 使用进度条，需要引入element.js模块
*/
layui.use(["element", "jquery", "layer"], function () {
var element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
// 点击下载按钮，开始模拟下载
$("#loading").click(function () {
var value = 0;
var timer = setInterval(function () {
value += Math.random() * 10;
if(value >= 100) {
value = 100;
clearInterval(timer);
}
// 设置进入条进度
element.progress('test', parseInt(value) + '%');
}, 500);
// 设置当前按钮为禁用状态
$(this).addClass("layui-btn-disabled");
});
})
</script>
进度条：默认进度条的宽度和父元素一样宽！ 常见样式 layui-progress 代表一个进度条 |- layui-progress-big 设置一个大进度条 |- layui-progress-bar 代表显示的进度 |- layui-bg-red 赤色 |- layui-bg-orange 橙色 |- layui-bg-green 墨绿 |- layui-bg-cyan 藏青 |- layui-bg-blue 蓝色 |- layui-bg-cyan 藏青 |- layui-bg-black 雅黑 如何实现自定义背景颜色？？？ a)新建一个css文件，在文本中定义好一个class选择器，然后设置好背景颜色 b)在需要使用该背景颜色的html文档中，引入css文件，然后再标签上面使用
常见属性 lay-percent="50%" 设置进度条的默认进度值 lay-showPercent="yes" 显示进度条的进度值
常见方法 动态设置进度值方法 语法：element.progress('事件过滤器', 进度值 + '%');
徽章
常见样式 layui-badge-dot 实心圆点徽章 layui-badge 常规弧形徽章 layui-badge-rim 边框徽章
<div class="content" type="小徽章">
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
</div>
<div class="content" type="常规弧形徽章">
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
</div>
<div class="content" type="边框徽章">
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
</div>
<div class="content" type="与其它元素的搭配">
<ul class="layui-nav style="text-algin=center">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">
个人中心
<span style="position: relative; bottom: 0px; left: -4px" class="layui-badge-dot"></span>
</a>
</li>
</ul>
</div>
扫一扫
7839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
