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

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源:站长图库