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:{}//标签属性
}