利用jQuery实现标签添加筛选代码



13 50 17



特效描述:利用jQuery实现标签添加筛选代码,利用jQuery实现标签添加筛选代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/jquery.sTags.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.14.2/styles/monokai-sublime.min.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.14.2/highlight.min.js"></script>
<script src="js/jquery.sTags.js"></script>

3. HTML代码

<div class="container">
		<h1>DEMO INPUT 1 : 基本功能</h1>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoInput1").sTags({
		data:TagsData,
	})
	</code>
</pre>	
<input type="text" id="DemoInput1">
目的:改变INPUT的值
<hr>
<h1>DEMO INPUT 2 :标签内有默认值 标签随机颜色</h1>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoInput2").sTags({
		defaultData:[1,3,2],
		data:TagsData,
		colro:2
	})
	</code>
</pre>	
<input type="text" id="DemoInput2" value="2,3">
目的:改变INPUT的值<br>
标签内有默认值,设定的默认值将失效。
<hr>
<h1>DEMO INPUT 3 :自定义默认值</h1>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoInput3").sTags({
		defaultData:[1,3,2],
		data:TagsData,
		colro:[0]
	})
	</code>
</pre>	
<input type="text" id="DemoInput3" value="">
目的:改变INPUT的值
<hr>
<h1>DEMO div 1 :基本功能</h1>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoDiv1").sTags({
		data:TagsData,
		click:function(e){
			alert(e.attr("tagid"))
		},
	})
	</code>
</pre>	
<div id="DemoDiv1"></div>
目的:在DIV中列出所有标签
<hr>
<h1>DEMO div 2:自定义默认值 关闭筛选</h1>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoDiv2").sTags({
		defaultData:[1,3,2],
		data:TagsData,
		screen:false
	})
	</code>
</pre>	
<div id="DemoDiv2"></div>
作用于DIV上时的,默认值功能演示。<br>
<hr>
<h1>DEMO div 3:自定义标签</h1>
默认情况下标签是以div标签包裹span标签内包裹标签名,自定义则改变div标签内的包裹内容。<br>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoDiv3").sTags({
		data:TagsData1,
		tagHtml:"{name}-{id}",
		click:function(e){
			alert(e.attr("tagid"))
		},
	})
	</code>
</pre>	
<div id="DemoDiv3"></div>
作用于DIV上时的,自定义标签内容的演示。<br>
<hr>
<h1>DEMO div 4:改为链接 补充数据</h1>
默认情况下标签是元素是div,可将其改为链接标签a。<br>
JS Code:
<pre>
	<code class="javascript">
	$("#DemoDiv4").sTags({
		data:TagsData,
		dataAttr:["id","name","py"],
		screen:false,
		tagName:"a",
		tagAttr:{
			href:"tag/{id}",
			target:"_blank"
		}
	})
	</code>
</pre>	
<div id="DemoDiv4"></div>
不同的数据处理演示、改变标签属性的演示<br>
原始数据的数据与本插件的数据格式不符,缺少screen属性。<br>
原始数据中的py数据也可作为screen数据,则在设置中添加  dataAttr:["id","name","py"] <br>
<hr>
<h1>DEMO div 5:附加标签(按钮)和 标签独立事件</h1>
JS Code:
<pre>
	<code class="javascript">
	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("后排插入标签 事件")
				}
			}
		]
	})
	</code>
</pre>	
<div id="DemoDiv5"></div>
标签附加数据演示、标签独立事件演示。<br>
标签数据中还可以有独立的事件:fn属性。数据中如有该属性,将替换默认功能。
<hr>
默认值:
JS Code:
<pre>
	<code class="json">
{
	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:{}//标签属性
}
	</code>
</pre>	
		</div>
	<script type="text/javascript">
	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"})
	$("#DemoInput1").sTags({
		data:TagsData,
	})
	$("#DemoInput2").sTags({
		defaultData:[1,3,2],
		data:TagsData,
		color:2
	})
	$("#DemoInput3").sTags({
		defaultData:[1,3,2],
		data:TagsData,
		colro:[0]
	})
	$("#DemoDiv1").sTags({
		data:TagsData,
		click:function(e){
			alert(e.attr("tagid"))
		},
	})
	$("#DemoDiv2").sTags({
		defaultData:[1,3,2],
		data:TagsData,
		screen:false,
	})
	$("#DemoDiv3").sTags({
		data:TagsData1,
		screen:false,
		tagHtml:"{name}-{id}",
		click:function(e){
			alert(e.attr("tagid"))
		},
	})
	$("#DemoDiv4").sTags({
		screen:false,
		dataAttr:["id","name","py"],
		data:TagsData1,
		tagName:"a",
		tagAttr:{
			href:"tag/{id}",
			target:"_blank"
		}
	})
	TagsData.push({id:8,name:"独立按钮",screen:"cas",fn:function(){console.log("单独的事件")}})
	$("#DemoDiv5").sTags({
		data:TagsData,
		color:1,
		screen:false,
		data_:[
			{
				name:"前排插入标签",
				position:1,
				fn:function(){
					console.log("前排插入标签 事件")
				}
			},
			{
				name:"后排插入标签",
				position:0,
				fn:function(){
					console.log("后排插入标签 事件")
				}
			}
		]
	})
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 筛选 筛选器 添加删除 添加标签

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到