sTags是一款jQuery标签插件。该插件可以生成不同颜色的标签，可以对标签进行搜索过滤，添加和删除等。
使用方法
在页面中引入jquery.sTags.css，jquery和jquery.sTags.js。
<link rel="stylesheet" href="jquery.sTags.css">
<script src="jquery.min.js"></script>
<script src="jquery.sTags.js"></script>
|
HTML结构
可以使用input或div来作为标签的容器。
<input type="text" id="DemoInput">
<div id="DemoDiv"></div>
|
CSS样式
.sTags-input{
border: 1px solid #ccc;
height: 100px;
}
.sTags-input>div{
display: inline-block;
padding: 5px 5px 5px 12px;
margin: 2px;
border-radius: 2px;
}
.sTags-input>div>a{
display: inline-block;
margin: 0 7px;
color: #ddd;
cursor: pointer;
}
.sTags{
margin: 10px 0;
}
.sTags-old{
color: #fff;
background: #A2A;
}
.sTags-new{
color: #fff;
background: #A2CD5A;
}
.sTags>div,
.sTags>a{
cursor: pointer;
display: inline-block;
padding: 5px 12px;
margin: 2px;
border-radius: 2px;
color: #fff;
background: #A2CD5A;
}
|
初始化插件
$("#DemoInput").sTags({
data:TagsData,
})
$("#DemoDiv").sTags({
data:TagsData,
click:function(e){
alert(e.attr("tagid"))
},
})
|