jquery.tag使用文档

author:zhujie

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tag.js"></script>
<link rel="stylesheet" href="jquery.tag.css" type="text/css">

1、简单用法

html:
<div id="testtag1" tagname="test1"></div>
当页面中有多个tag container时，可以指定tagname进行区分
js:
$(document).ready(function(){
	$("#testtag1").tagsInit();
});
效果

2、配置参数

名称 类型 默认值 描述
input boolean true 是否创建标签input(在input上回车生成标签)
inputNote string 空 显示在input上面的提示（例如'输入后请回车'）,只有input参数为true时才有效
beforeInput function null input回车添加标签之前执行的函数,函数形式为:function beforeInput(tagValue){...} 第一个参数是要添加的标签文字。当函数返回false的时候，表示拒绝添加此标签。
afterInput function null input回车添加标签成功后执行的函数,函数形式为:function afterInput(tagValue){...} 第一个参数是要添加的标签文字
del boolean true 是否可以删除标签
onDel function null 删除标签之前执行的函数,函数形式为:function onDel(tagValue,tagId){...} 第一个参数是要删除的标签文字，第二个参数是要删除的标签id 当函数返回false的时候，表示拒绝删除此标签。
repeat boolean OR string true 添加标签时候是否检测重复,false表示不检查，true和空字符串表示检查但不弹出对话框提示，非空字符串为检查且表示提示的内容
onRepeat function null 添加标签时候检测到重复标签时触发的函数，函数形式为function onRepeat(tagValue,tagId){}
max number 0 此标签容器所能容纳的最大标签数目，0为不受限制
action boolean OR object OR function false 每个标签的点击动作。false：点击没反映。object{href:链接(%v%表示tagValue,%id%表示tagId),target:...}：打开链接。function：点击时执行此函数，函数参数为tagValue,tagId
theme string blue css模版主题

3、高级用法

3.1、添加之前进行判断，符合条件再添加

html:
<div id="testtag2" tagname="test2"></div>
js:
$(document).ready(function(){
	$("#testtag2").tagsInit({
		inputNote:"输入后回车",
		del:false,
		beforeInput:function(tagValue){
			if(tagValue=='aaa'){
				alert("不允许输入aaa");
				return false;
			}
		}
	});
});
效果

3.2、给每个标签上加链接或者js函数

html:
<div id="testtag3" tagname="test3"></div> <div id="testtag4" tagname="test4"></div>
js:
$(document).ready(function(){
	$("#testtag3").tagsInit({
		repeat:'此标签列表中已经存在啦',
		action:{href:'http://www.baidu.com/s?wd=%v%',target:'_blank'}
	});
	$("#testtag4").tagsInit({
		onDel:function(){alert("不允许删除");return false;},
		action:function(tagValue){alert(tagValue);},
		theme:'black'
	});
});
效果

3.3、添加标签的时候与后台交互

html:
<div id="testtag5" tagname="test5"></div>
js:
$(document).ready(function(){
	var tag=$("#testtag5").tagsInit({
		beforeInput:function(tagValue){
			$.post('http://www.baidu.com/s',{wd:tagValue},function(result){
				alert(result);
				tag.tagsAdd(tagValue);
			});
			return false;
		}
	});
});
效果

4、其他函数

4.1、tagsAdd

通过此函数可以手动向标签容器添加标签
函数形式:tagsAdd=function(tagValue,tagId){...}

4.2、tagsDel

通过此函数可以手动在标签容器中删除标签
函数形式:tagsDel=function(tagValue,tagId){...}

4.3、tagsClear

通过此函数可以清空标签容器中的标签
函数形式:tagsClear=function(){...}

4.4、tagsCount

通过此函数可以获取标签容器中标签的个数
函数形式:tagsCount=function(){...}

4.5、tagsIndexof

通过此函数可以获取某标签在标签容器中的位置
函数形式:tagsIndexof=function(tagValue,tagId){...}。如果tagValue不为空，按照tagValue查找，否则按照tagId进行查找

4.6、tagsStr

通过此函数可以将所有标签转换为字符串(通过split相隔)
函数形式:tagsStr=function(split){...}

4.7、tagsJson

通过此函数可以将所有标签转换为json字符串
函数形式:tagsJson=function(){...}

4.8、示例

html
<div>
	<input type="button" onclick="mytagsAdd()" value="tagsAdd"/>
	<input type="button" onclick="mytagsDel()" value="tagsDel"/>
	<input type="button" onclick="mytagsClear()" value="tagsClear"/>
	<input type="button" onclick="mytagsCount()" value="tagsCount"/>
	<input type="button" onclick="mytagsIndexof()" value="tagsIndexof"/>
	<input type="button" onclick="mytagsStr()" value="tagsStr"/>
	<input type="button" onclick="mytagsJson()" value="tagsJson"/>
</div>
<div id="testtag6" tagname="test6"></div>
js
var tag6=$("#testtag6").tagsInit();
function mytagsAdd(){
	tag6.tagsAdd(prompt("输入添加内容"));
}
function mytagsDel(){
	tag6.tagsDel(prompt("输入删除内容"));
}
function mytagsClear(){
	tag6.tagsClear();
}
function mytagsCount(){
	alert(tag6.tagsCount());
}
function mytagsIndexof(){
	alert(tag6.tagsIndexof(prompt("输入查找内容")));
}
function mytagsStr(){
	alert(tag6.tagsStr());
}
function mytagsJson(){
	alert(tag6.tagsJson());
}
效果