使用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開發一個帶有標籤功能的文章發佈系統