自主开发jquery标签插件

想必大家伙都有一个梦想，就是自己开发一个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)