Jquery实现关键字标签生成插件

dengjianbin 7年前
此插件功能Enter或Tab或失去焦点确定标签输入完毕,双击文字可以编辑该标签,单击叉叉(×)表示删除该标签
1、一开始初始化标签输入框的数量
2、容器可接受最大的标签数量
3、每个标签允许接受最大的字符长度
4、 标签输入框的宽度、标签输入框的高度
5、提示信息与标签输入框的top偏移量
6、提示信息与标签输入框的left偏移量
7、初始化的标签内容,以逗号为间隔;
 
效果如下:
 
Jquery插件,Jquery资源,Jquery特效,div+css

插件代码如下:
$.fn.extend({   tabControl: function(options, tags) {    var defOpt = {     initTabCount: 1,     maxTabCount: 10,     tabMaxLen: 10,     tabW: 150,     tabH: 15,     tipTOffset: 5,     tipLOffset: 0    };    var opts = $.extend(defOpt, options);    var _tags = [];    if (tags) {     tags = tags.replace(/[^A-Za-z0-9_,\u4E00-\u9FA5]+/gi, "").replace(/^,+|,+$/gi, "");//将非中英文、数字、下划丝、逗号的其他字符都去掉,且不能以逗号开头与结束     _tags = tags.split(',');    }    _tags = _tags.length > opts.maxTabCount ? _tags.slice(0, opts.maxTabCount - 1) : _tags;    opts.initTabCount = opts.maxTabCount <= _tags.length ? _tags.length: _tags.length + (opts.maxTabCount - _tags.length > opts.initTabCount ? opts.initTabCount: opts.maxTabCount - _tags.length);    var checkReg = /[^A-Za-z0-9_\u4E00-\u9FA5]+/gi;//匹配非法字符    var initTab = function(obj, index) {//初始化标签输入     var textHtml = "<input class='tabinput' name='tabinput' style='width:" + opts.tabW + "px;height:" + opts.tabH + "px;' type='text'/>";     obj.append(textHtml);     if (_tags[index]) {      var __inputobj = $("input[type='text'][name='tabinput']", obj).eq(index);      __inputobj.val(_tags[index].substr(0, opts.tabMaxLen)).css("display", "none");      compTab(obj, __inputobj, _tags[index].substr(0, opts.tabMaxLen));     }     $("input[type='text'][name='tabinput']:last", obj).bind("keydown blur click",     function(event) {      if (event.type == "click") {//这个事件处理函数会接收到一个事件对象(event),可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为「event.preventDefault()」,又想阻止事件起泡「event.stopPropagation()」,这个事件处理函数必须返回false。       return false;      }      if (event.keyCode == 13 || event.keyCode == 9 || event.type == "blur") {       event.preventDefault();//主要是為了tab鍵,不要讓當前元素失去焦點(即阻止(浏览器)默认的行为)       event.stopPropagation();       var inputObj = $(this);       var value = $(this).val().replace(/\s+/gi, "");       if ((event.keyCode == 13 || event.keyCode == 9) && value != "")//主要是處理IE        inputObj.data("isIEKeyDown", true);       if (event.type == "blur" && inputObj.data("isIEKeyDown")) {        inputObj.removeData("isIEKeyDown");        return;       }       if (value != "") {        if (value.length > opts.tabMaxLen) {         showMes($(this), "请输入1到" + opts.tabMaxLen + "个字符长度的标签");         return;        }        var _match = value.match(checkReg);        if (!_match) {         compTab(obj, inputObj, value);         if ($("input[type='text'][name='tabinput']", obj).length < opts.maxTabCount) {          if (!inputObj.data("isModify"))           initTab(obj);          else if (!$("input[type='text'][name='tabinput']", obj).is(":hidden")) {           initTab(obj);          }         }         $("input[type='text']:last", obj).focus();         hideErr();        }         else {         showMes(inputObj, "內容不能包含非法字符「{0}」!".replace("{0}", _match.join(" ")));        }       }        else {        if (event.type != "blur")         showMes(inputObj, "內容不為空");       }      }     }).bind("focus",     function() {      hideErr();     });    }    //完成标签编写    var compTab = function(obj, inputObj, value) {     inputObj.next("span").remove();//删除紧跟input元素後的span     var _span = "<span name='tab' id='radius'><b>" + value + "</b><a id='deltab'>×</a></span>";     inputObj.after(_span).hide();     inputObj.next("span").find("a").click(function() {      if (confirm("确定删除该标签?")) {       inputObj.next("span").remove();       inputObj.remove();       if ($("span[name='tab']", obj).length == opts.maxTabCount - 1)        initTab(obj);      }     });     inputObj.next("span").dblclick(function() {      inputObj.data("isModify", true).next("span").remove();      inputObj.show().focus();     });    }    return this.each(function() {     var jqObj = $(this);     for (var i = 0; i < opts.initTabCount; i++) {      initTab(jqObj, i);     }     jqObj.data("isInit", true);     jqObj.click(function() {      $("input[type='text'][name='tabinput']", jqObj).each(function() {       if ($(this).val() == "") {        $(this).focus();        return false;       }      });     });    });    function showMes(inputObj, mes) {     var _offset = inputObj.offset();     var _mesHtml = "<div id='errormes' class='radius_shadow' style='position:absolute;left:" + (_offset.left + opts.tipLOffset) + "px;top:" + (_offset.top + opts.tabH + opts.tipTOffset) + "px;'>" + mes + "</div>";     $("#errormes").remove();     $("body").append(_mesHtml);    }    function hideErr() {     $("#errormes").hide();    }    function showErr() {     $("#errormes").show();    }   },   getTabVals: function() {//获取当前容器所生成的tab值,结果是一维数组    var obj = $(this);    var values = [];    obj.children("span[name=\"tab\"][id^=\"radius\"]").find("b").text(function(index, text) {     var checkReg = /[^A-Za-z0-9_\u4E00-\u9FA5]+/gi;     values.push(text.replace(checkReg, ""));    });    return values;   }  });

项目主页:http://www.open-open.com/lib/view/home/1344614175039