easyui设置选项卡的如何为每个选项卡左上角添加标注
时间: 2023-07-29 07:09:22 浏览: 90
jQuery EasyUI API 中文文档 – Tabs标签页/选项卡
你可以使用easyui中的tabs组件来创建选项卡,然后在每个选项卡的标题中添加自定义元素来实现在左上角添加标注的效果。具体操作步骤如下:
1. 在tabs组件中添加一个onLoad事件,在事件中获取到每个选项卡的标题元素,并在其左上角添加自定义元素。
```javascript
$('#myTabs').tabs({
onLoad:function(panel){
var tab = $(panel).panel('options').tab;
var title = tab.find('.tabs-title');
var badge = $('<span>').addClass('badge').text('New');
title.prepend(badge);
}
});
```
2. 在CSS中定义自定义元素的样式。
```css
.badge {
background-color: red;
color: white;
font-size: 10px;
padding: 2px 4px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
```
完整的代码示例:
```javascript
$('#myTabs').tabs({
onLoad:function(panel){
var tab = $(panel).panel('options').tab;
var title = tab.find('.tabs-title');
var badge = $('<span>').addClass('badge').text('New');
title.prepend(badge);
}
});
.badge {
background-color: red;
color: white;
font-size: 10px;
padding: 2px 4px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
```
这样每个选项卡的标题左上角就会显示一个红色的圆形标注,标注中包含了文本“New”。你可以根据自己的需求修改标注的样式和文本内容。
阅读全文