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]:标签字色