「分享」jquery标签（关键字）插件 (改进版)

最新推荐文章于 2021-12-12 10:05:40 发布

weixin_30651273

最新推荐文章于 2021-12-12 10:05:40 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SeaSun/archive/2011/08/05/2128913.html

版权

css

  /*input post tab*/
div.radius_shadow{border:1px solid #DBDBDB;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius: 5px;padding:5px;-webkit-box-shadow:0 0 10px #414141;-moz-box-shadow:0 0 10px #414141;box-shadow:0 0 10px #414141;font-size:12px;background:#fff;}
span#radius{display:inline-block;float:none;font-size:12px;padding:2px 5px;margin:-2px 5px 5px;border:1px solid #E0E0E0; background-color:#F0F0F0;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius: 5px;color:#000;}
.tabinput{margin-left:5px;border:0;}
a#deltab{cursor:pointer;display:inline-block;color:#808080;margin-left:5px;font-weight:bold;}
a#deltab:hover{color:#D2D2D2;text-decoration:none;}

_tags.length工作需要：扩展tag

$.fn.extend({
     /*
    **標籤控件
    **功能：按Enter或Tab或失去焦點確定標籤輸入完畢，雙擊文字可以編輯該標籤，單擊叉叉（×）表示刪除該標籤
    **tabControl:function
    **參數說明：
    *initTabCount:int 一開始初始化標籤輸入框的數量；
    *maxTabCount:int 容器可接受最大的標籤數量；
    *tabMaxLen:int 每個標籤允許接受最大的字符長度；
    *tabW:int 標籤輸入框的寬度；
    *tabH:int 標籤輸入框的高度；
    *tipTOffset:int 提示信息與標籤輸入框的top偏移量；
    *tipLOffset:int 提示信息與標籤輸入框的left偏移量；
    *tags:string 初始化的標籤內容，以逗號為間隔；
     */
    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 " ) { // enter|tab|失去焦點
                    event.preventDefault(); // 主要是為了tab鍵，不要讓當前元素失去焦點（即阻止（浏览器）默认的行为）
                    event.stopPropagation();
                     var inputObj = $( this );
                     // var value = $.trim($(this).val());
                     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 () { // 刪除tab
                 if (confirm( " 確定刪除該標籤？ " )) {
                    inputObj.next( " span " ).remove();
                    inputObj.remove();
                     if ($( " span[name='tab'] " , obj).length == opts.maxTabCount - 1 )
                        initTab(obj);
                }
            });
            inputObj.next( " span " ).dblclick( function () { // 修改tab
                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 ;
                    }
                });
            });
             // $("input[type='text'][name='tabinput']:first", jqObj).focus();
        });
         // 生成tip
         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);
        } // 隱藏tip
         function hideErr() {
            $( " #errormes " ).hide();
        } // 顯示tip
         function showErr() {
            $( " #errormes " ).show();
        }
    },
     // 獲取當前容器所生成的tab值，結果是一維數組
    getTabVals: function () {
         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;
    }

});

调用

$(function(){

    $( " div " ).tabControl({maxTabCount: 5 ,tabW: 80 }, " adf,adfwer3w453456456&*,sdf,,, " );
    $( " #getTab " ).click( function (){
         var v = $( " div " ).getTabVals();
        alert(v.join( " , " ));
    });
});

效果图：

在线DEMO

转载于:https://www.cnblogs.com/SeaSun/archive/2011/08/05/2128913.html

weixin_30651273

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
「分享」jquery标签（关键字）插件 (改进版)

css /*input post tab*/div.radius_shadow{border:1px solid #DBDBDB;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius: 5px;padding:5px;-webkit-box-shadow:0...
复制链接

扫一扫