ver 0.2
加载元素增加$(e).data("sTipsSetOptions"),包含所有设置项目。
修复附加按钮
var o = $(e).data("sTagsSetOptions")
//增加属性
o.removeVal //本次删除的标签id
o.addVal //本次增加的标签id
o.defauleVal//原始标签的id
//增加功能
$(e).sTabsCtrl("ShowList")//加载列表,用于临时增加data数据后重载列表
$(e).sTabsCtrl("destroy")//还原元素,单会保留$(e).data("sTagsSetOptions"),主要用于重新加载
$(e).sTabsCtrl("reload")//重新加载所有内容。
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;
}
Demo标签数据:
var TagsData=[]
TagsData.push({id:1,name:"PHP",screen:"php"})
TagsData.push({id:4,name:"C#",screen:"c"})
TagsData.push({id:6,name:"JavaScript",screen:"javascript"})
TagsData.push({id:2,name:"HTML5",screen:"html5"})
TagsData.push({id:3,name:"Python",screen:"python"})
TagsData.push({id:5,name:"数据库",screen:"sjk"})
TagsData.push({id:7,name:"服务器",screen:"fwq"})
var TagsData1=[]
TagsData1.push({id:1,name:"恐怖片",py:"kbp"})
TagsData1.push({id:4,name:"科幻片",py:"khp"})
TagsData1.push({id:6,name:"爱情片",py:"aqp"})
TagsData1.push({id:2,name:"战争片",py:"zzp"})
TagsData1.push({id:3,name:"动作片",py:"dzp"})
TagsData1.push({id:5,name:"动画片",py:"dhp"})
TagsData1.push({id:7,name:"喜剧片",py:"xjp"})
DEMO INPUT 1 : 基本功能
JS Code:
$("#DemoInput1").sTags({
data:TagsData,
})
目的:改变INPUT的值
DEMO INPUT 2 :标签内有默认值 标签随机颜色
JS Code:
$("#DemoInput2").sTags({
defaultData:[1,3,2],
data:TagsData,
colro:2
})
目的:改变INPUT的值
标签内有默认值,设定的默认值将失效。
DEMO INPUT 3 :自定义默认值
JS Code:
$("#DemoInput3").sTags({
defaultData:[1,3,2],
data:TagsData,
colro:[0]
})
目的:改变INPUT的值
DEMO div 1 :基本功能
JS Code:
$("#DemoDiv1").sTags({
data:TagsData,
click:function(e){
alert(e.attr("tagid"))
},
})
目的:在DIV中列出所有标签
DEMO div 2:自定义默认值 关闭筛选
JS Code:
$("#DemoDiv2").sTags({
defaultData:[1,3,2],
data:TagsData,
screen:false
})
作用于DIV上时的,默认值功能演示。
DEMO div 3:自定义标签
默认情况下标签是以div标签包裹span标签内包裹标签名,自定义则改变div标签内的包裹内容。
JS Code:
$("#DemoDiv3").sTags({
data:TagsData1,
tagHtml:"{name}-{id}",
click:function(e){
alert(e.attr("tagid"))
},
})
作用于DIV上时的,自定义标签内容的演示。
DEMO div 4:改为链接 补充数据
默认情况下标签是元素是div,可将其改为链接标签a。
JS Code:
$("#DemoDiv4").sTags({
data:TagsData,
dataAttr:["id","name","py"],
screen:false,
tagName:"a",
tagAttr:{
href:"/tag/{id}",
target:"_blank"
}
})
不同的数据处理演示、改变标签属性的演示
原始数据的数据与本插件的数据格式不符,缺少screen属性。
原始数据中的py数据也可作为screen数据,则在设置中添加 dataAttr:["id","name","py"]
DEMO div 5:附加标签(按钮)和 标签独立事件
JS Code:
TagsData.push({id:8,name:"独立按钮",screen:"cas",fn:function(){console.log("单独的事件")}})
$("#DemoDiv5").sTags({
data:TagsData,
screen:false
data_:[
{
name:"前排插入标签",
position:0,
fn:function(){
console.log("前排插入标签 事件")
}
},
{
name:"后排插入标签",
position:1,
fn:function(){
console.log("后排插入标签 事件")
}
}
]
})
标签附加数据演示、标签独立事件演示。
标签数据中还可以有独立的事件:fn属性。数据中如有该属性,将替换默认功能。
默认值:
JS Code:
{
data:[],//格式:{id:数字,name:文本,screen:筛选文本}
data_:[],//附加标签(按钮)数据
dataAttr:[],//因数据格式不同,这里填写三个分别对应要展现的 id name screen 属性的对应属性。如填写则必须填写3个
//defaultData:[],//默认的数据,内容为data.id
tagInputCSS:"sTags-input",//输入框css
tagListCSS:"sTags",//列表css
tagCSS:["sTags-old","sTags-new"],//输入框内标签样式,第一个为默认标签样式,第二个为新增标签样式
color:1,//标签列表颜色,0不使用,1按screen的首字母,按顺序循环数组内颜色,2随机颜色,数组内颜色,值0为背景色,1为字色
colorData:[
["#90c5f0","#fff"],
["#8E388E","#fff"],
["#FFA500","#fff"],
["#FBF","#fff"],
["#DA70D6","#fff"],
["#A2CD5A","#fff"],
["#228B22","#fff"],
["#CDC0B0","#fff"],
["#CD7054","#fff"],
["#00688B","#fff"]
],//标签列表颜色,0不使用,1按screen的首字母,按顺序循环数组内颜色,2随机颜色,数组内颜色,值0为背景色,1为字色
screen:true,//是否启用筛选功能
screenInput:{
type:"text",
size:8,
placeholder:"筛选"
},//筛选输入框属性,
tagTXT:"Tags:",//标签列表前缀
click:function(e){
console.log(e.attr("tagid"))
},//当目标元素为div时,列表的点击事件。e为点击元素自身
tagName:"",//标签列表使用的html标签,默认为div,如要改为div和a之外的其他标签则需要修改css
tagHtml:"",//自定义标签列表中的html内容。{name} 替换为 tag.name {id}将转换为 tag.id,
tagAttr:{}//标签属性
}
配置值详细说明
JS Code:
data:标签数据:数组 --必填项
格式例子:[{id:1,name:"sdd",screen:"sdd"},{id:2,name:"ggf",screen:"ggf"}]
--div标签,当作用于div标签时,还可对每个标签添加单独的点击事件
{
id:1,
name:"sdd",
screen:"sdd",
fn:function(e){//e为点击元素自身
console.log(e.tagid)
}
}
data_:附加标签数据,该数据将会显示在标签列表最后,以标签形式显示,作为单纯的按钮功能,不受标签、筛选和tagid限制。
[
{
name:"",//标签名
position:0,//插入位置:0最后插入,非零最前插入
fn:function(){ //点击事件
console.log("button1 event")
}
}
]
dataAttr:数据值添加:数组
原有数据可能不会适应本插件,这里是为了补全本插件所用的数据
如原有数据可能是,{index:1,title:"标题一",pinyin:"bt1"}
那么为了能够让本插件正确使用这些数据,dataAttr的属性就应该填写["index","title","pinyin"]
注意,要按照顺序填写
index对应id
title对应name
pinyind对应screen
defaultData:默认标签:数组
存放标签数据中的id的值
当input标签中有数据是会替换本数值并转为数组
数据例子:[1,2,3]
--input标签
当作用于input标签时,将会将默认值的标签填入标签编辑框
--div标签
当作用于div标签时,将不再显示所有标签而改为仅显示默认标签
tagInputCSS:标签编辑框CSS样式:字符串 -- input标签有效
默认值:sTags-input
tagListCSS:待选标签列表CSS样式:字符串
默认值:sTags
tagCSS:标签编辑框内的标签的CSS样式:数组 -- input标签有效
默认值:["sTags-old","sTags-new"]
数据0表示 defaultData(默认标签数据的样式)
数据1表示 本次编辑新增加的标签的样式
screen:标签列表筛选功能是否启用:bool值
默认值:true
该功能针对标签数据的screen,如果关闭该功能则忽略screen的数据。
screenInput:筛选输入框属性:json
默认值:{
type:"text",
size:8,
placeholder:"筛选"
}
tagTXT:标签列表的前缀字符:字符串
click:标签列表的点击事件 -- 当标签应用于div时有效 -- div标签有效
例子:click:function(e){
console.log(e.attr("gatid"),e.text())
}
color:标签列表颜色开关:数字
--0:关闭
--1:按screen首字符切换colorData内容
要使用该功能,请将标签数据按照screen排序
该功能要开启screen才有效
--2:随机使用colorData内容
colorData:要应用的标签列表的颜色数据:二维数组
olorData[x][0]:标签背景色
olorData[x][1]:标签字色