使用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'来指定标签生成容器。

.....

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