Chinaunix首页 | 论坛 | 博客
  • 博客访问: 197482
  • 博文数量: 95
  • 博客积分: 2383
  • 博客等级: 大尉
  • 技术积分: 1135
  • 用 户 组: 普通用户
  • 注册时间: 2011-06-09 15:14
文章分类
文章存档

2012年(84)

2011年(11)

我的朋友
最近访客

分类: 系统运维

2012-05-17 18:01:29

日期:2012-5-14  来源:

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

   

网站和web开发中我们常常需要处理类似标签添加功能的模块,以前我们也介绍过相关的jQuery插件 - ,可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的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代码非常简单,只需要指定需要生成标签的容器,如下:

....

来源:
阅读(1244) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~