文档章节

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

gbin1
 gbin1
发布于 2012/05/22 17:24
字数 540
阅读 155
收藏 0

日期:2012-5-14  来源:GBin1.com

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

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

网站和web开发中我们常常需要处理类似标签添加功能的模块,以前我们也介绍过相关的jQuery插件 - textext,可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的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开发一个带有标签功能的文章发布系统

© 著作权归作者所有

gbin1
粉丝 86
博文 722
码字总数 275571
作品 0
东城
私信 提问
JPress v2.0-rc.8 发布,新增插件开发的代码生成器

JPress 是一个使用Java(JFinal、Jboot框架)开发的类似 WordPress 的系统,但更加侧重于企业营销和微信运营。 以下是 JPress v2.0-rc.8 的更新内容: 新增:新增插件代码生成直接生成后台U...

理工男海哥
04/15
0
0
简洁优雅的Go Web框架 - Faygo

Faygo(原名Thinkgo) 概述 Faygo以全新的架构实现,它面向Handler接口开发,是支持智能参数映射与校验、支持自动化API文档的Go语言web框架。 官方QQ群:Go-Web 编程 42730308 查看《用户手册》...

henrylee2cn
2016/01/16
0
0
JPress v2.0-rc.6 发布,新增 Java 插件的在线升级功能

JPress 是一个使用Java(JFinal、Jboot框架)开发的类似 WordPress 的系统,但更加侧重于企业营销和微信运营。 JPress v2.0-rc.6 发布,除了修复细节bug以外,主要是完善了 JPress 插件的在线...

理工男海哥
03/18
0
0
简易博客系统--SimpleBlog

笔者用过django一段时间了,是时候写点东西了。不过官网文档稍微有点复杂,对新手而言很困难,而网上的一些教程很多都过时了,最近看到一个外文的教程非常不错,基于最新的django1.9写的,通...

一刀
2015/01/04
2.8K
0
快速掌握Eclipse Plugin / RCP开发思想

快速掌握Eclipse Plugin / RCP开发思想 李晓明 (lxm@lxm.name) 引言 本文不是快速入门的文章,只面向有一定基础的开发人员,至少看这篇文章之前你应该了解什么是Eclipse,什么是RCP,什么是P...

小穷博士
2014/06/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
9
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0
java并发图谱

1527
昨天
2
0
Mybatis之拦截器Interceptor

使用mybatis时用PageHelper进行分页,用到了PageInterceptor,借此了解下mybatis的interceptor。Mybatis的版本是3.4.6,MybatisHelper的版本是5.1.3。 1、PageInterceptor 先上一段代码,如下...

克虏伯
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部