一款jQuery标签插件sTags特效

一款jQuery标签插件sTags特效

sTags是一款jQuery标签插件。该插件可以生成不同颜色的标签,可以对标签进行搜索过滤,添加和删除等。

使用方法
在页面中引入jquery.sTags.css,jquery和jquery.sTags.js。

1
2
3
<link rel="stylesheet" href="jquery.sTags.css">
<script src="jquery.min.js"></script>
<script src="jquery.sTags.js"></script>

HTML结构
可以使用input或div来作为标签的容器。

1
2
<input type="text" id="DemoInput">
<div id="DemoDiv"></div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.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;
}

初始化插件

1
2
3
4
5
6
7
8
9
10
$("#DemoInput").sTags({
    data:TagsData,
})
 
$("#DemoDiv").sTags({
  data:TagsData,
  click:function(e){
    alert(e.attr("tagid"))
  },
})
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论