想必大家伙都有一个梦想,就是自己开发一个jquery插件,但却不知道从何入手,当你看到我这篇文章时你会发现,其实开发jquery插件或许没想象中那么难,话不多说,直接进入正题,本文章向大家展示一个本人基于jquery开发的一个jquery标签插件,就比如csdn写文章时候需要给文章添加标签(tag),方便其他人根据标签中的关键词更容易地找到想要的文章。
标签插件demo下载:
my_jquerytags-v1.0.2 ( latest stable version) (添加/删除标签,新增禁用启用插件功能)
my_jquerytags-v1.0.1.01 (添加/删除标签,修复上版本bug)
my_jquerytags-v1.0.1 (添加/删除标签)
my_jquerytags-v1.0.0 (添加/删除标签)
效果图:
通过以上图片,你或许会想,其实上面的功能与很多jquery标签插件类似啊,那为啥要用你的插件?为此,我必须想一些杠精声明一下:1:本文章的侧重点为开发jquery标签插件demo,仅提供功能演示、源码下载参考。而不是说你非要使用该插件。2:对比jquery官网的标签插件,我只能说,我看不懂,而且难以看清里面的逻辑,同时触发添加标签事件一般都是逗号,固定死的,而且你也不知道在哪里配置。因为,我就发火了,一气之下就自己手写一个jquery标签插件,同时保证可读性高、可扩展性强、可配置性高的优点。
;(function($, window, document,undefined) {
//定义TagsBuilder的构造函数
var TagsBuilder = function(selector) {
this.selector = selector;
this.init();
}
//定义TagsBuilder的方法
TagsBuilder.prototype = {
constructor:TagsBuilder,
init: function() {
var selector = this.selector;
var id = $(selector).attr("id");
if(id!=undefined && id!=null && id.length > 0){
activate(id);
}
},
enable:function(){
var selector = this.selector;
var id = $(selector).attr("id");
if(id!=undefined && id!=null && id.length > 0){
enable(true,id);
}
},
disable:function(){
var selector = this.selector;
var id = $(selector).attr("id");
if(id!=undefined && id!=null && id.length > 0){
enable(false,id);
}
}
}
//在插件中使用TagsBuilder对象
$.fn.tagsInput = function() {
//创建TagsBuilder的实体
return new TagsBuilder(this);
}
})(jQuery, window, document);
html调用方法
好了,本文会实时更新,只描述最新版本的功能。亲们有意的话可以下载源码回去研究一下。本人qq(2225629171)