施用jQuery tag handler开发一个带有标签功能的文章发布系统

日期：2012-5-14??来源：GBin1.com

在线演示1 ? 在线演示2 ? 本地下载

网站和web开发中我们常常需要处理类似标签添加功能的模块，以前我们也介绍过相关的jQuery插件 - textext ，可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的jQuery插件来实现漂亮的标签处理功能，这里我们将使用以前的超酷留言板系统 为基础来实现一个完整功能的留言发布系统，希望大家喜欢！

主要使用插件

• jQuery UI - 需要使用到autocomplete功能
  
• jQuery tag handler
• 其它插件请参考文章: 使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

注意：jQuery UI的autocomplete在Firefox下处理中文自动补齐功能有个bug，你需要自己解决，解决方法如下：

找到jQueryUI中的如下代码：

??? ??? ??? .bind( "blur.autocomplete", function( event ) {
??? ??? ??? ??? if ( self.options.disabled ) {
??? ??? ??? ??? ??? return;
??? ??? ??? ??? }

??? ??? ??? ??? clearTimeout( self.searching );
??? ??? ??? ??? // clicks on the menu (or a button to trigger a search) will cause a blur event
??? ??? ??? ??? self.closing = setTimeout(function() {
??? ??? ??? ??? ??? self.close( event );
??? ??? ??? ??? ??? self._change( event );
??? ??? ??? ??? }, 150 );
??? ??? ??? });

修改为：

??? ??? ??? .bind( "blur.autocomplete", function( event ) {
??? ??? ??? ??? if ( self.options.disabled ) {
??? ??? ??? ??? ??? return;
??? ??? ??? ??? }

??? ??? ??? ??? clearTimeout( self.searching );
??? ??? ??? ??? // clicks on the menu (or a button to trigger a search) will cause a blur event
??? ??? ??? ??? self.closing = setTimeout(function() {
??? ??? ??? ??? ??? self.close( event );
??? ??? ??? ??? ??? self._change( event );
??? ??? ??? ??? }, 150 );
??? ??? ??? }).bind("input.autocomplete", function() {
??? ??? ??? ??? // 修复在Firefox中不支持中文的BUG
??? ??? ??? ??? self.search(self.item);
??? ??? ??? }); 

如果你直接下载本文演示，已经修改此Bug。

在本文中，我们修改了jQuery tag handler的一些逻辑，缺省使用这个插件，如果你尝试输入重复的标签内容，你会发现无法输入，在我们例子中，如果你尝试输入重复标签，会发现，已存在的标签会闪烁提示你。

HTML代码

html代码非常简单，只需要指定需要生成标签的容器，如下：

<div  id="living-effect" class="tag-wrapper">
	<ul id="tags"></ul>
</div>				? ???? 

这里我们使用id='tags'来指定标签生成容器。

Javascript代码

$(function(){
	$('#tags').tagHandler({
		assignedTags: [ 'GBin1'],
		availableTags: [ 'HTML', 'CSS', 'Javascript', 'Dojo', 'Mootools', 'jQuery', 'jQuery插件', 'SEO', '素材', '图标' ],
		autocomplete: true,
		onAdd: function(tag){
			var addflag = true,tags = $('#tags').tagHandler("getTags");
			jQuery.each(tags, function (i, e) {
				if(tag.toUpperCase()===e.toUpperCase()){
					$('#tags').find('.tagItem').each(function(){
						if($(this).html().toLocaleUpperCase()===tag.toLocaleUpperCase()){
							$(this).animate({opacity: 0.55}).delay(20).animate({opacity: 1}).animate({opacity: 0.55}).delay(20).animate({opacity: 1});
						}
					});
					//$('#log').hide(0).html("标签已存在").show().delay(2000).fadeOut();
					addflag = false;
				}
			});
			return addflag;
		}
	});
});

以上代码定义了标签相关属性及其callback方法，这里我们再添加新标签的callback方法里判断是否重复，如果有重复则生成闪烁效果。

我们设定autocomplete为true，则插件会调用jQueryUI的自动补齐autocomplete方法，帮助用户输入标签。

assignTags设定了缺省显示的标签，avaiableTags设置了所有有效的标签。 这个插件包含其其它的选项和callback方法，具体请参考插件的ReadMe。

是不是很简单，希望大家喜欢这个演示。

来源：使用jQuery tag handler开发一个带有标签功能的文章发布系统