How JavaScript adds label effects

Adding your own label on the Douban is a common effect, and today it's a simple demo. Due to the problem of time I do not many principles, we can try to operate several times can understand the principle of it.

The effect of Jsfiddle is as follows:

Click on me to see the effect!

The HTML structure relies on the following:

<div class= "J-container" >
    <div class= "Mb-meta" >
        <div class= "btn Mb-add-button" >add</ div>
    </div>
    <ul class= "mb-list" ></ul>
</div>

All the JS code is as follows:

/** * JS text label * @time 2014-4-10 * @author Tugenhua/function Addtag (options) {this.config = { Containercls: '. J-container ',//Outermost container buttoncls: '. Mb-add-button ',//Add Press               Button Btncontainer: '. Mb-meta ',//Add button The closest parent container listitemcls: '. Mb-list ',
    
        Add a label to the current container before isinput:true//Add button requires input input box};
    This.cache = {arrs: []} this.init (options); } Addtag.prototype = {constructor:addtag, init:function (options) {This.config = $. Extend (This.config,options | |
            {});
    
            var self = this, _config = self.config, _cache = Self.cache; if (_config.isinput) {$ (_config.btncontainer). each (the function () {$ (this). Prepend (' <in Put placeholder= "Enter tags Here "class=" Mb-input ">");
            });
        } self._bindenv (); }, * * Binding event * @method _bindenv * keycode 13->enter Key * * * _BINDENV:F
            Unction () {var self = this, _config = self.config, _cache = Self.cache;
                    Input Enter Event if ($ ('. Mb-input '). Length > 0) {$ ('. Mb-input '). each (function () {
                            $ (this). Unbind (' KeyUp '). Bind (' KeyUp ', function (e) {var keycode = E.keycode, Curvalue = $.trim ($ (this). Val ()), Tparent = $ (this). Closest (_config.co
                        NTAINERCLS);
                        if (keycode = =) {self._renderhtml (curvalue,tparent);
                }
                    });
            });
 //Click the Add button to trigger the event $ (_config.buttoncls). each (function () {               $ (this). Unbind (' click '). Bind (' click ', function () {var container = $ (this). Closest (_confi
                    G.CONTAINERCLS); if ($ ('. Mb-input ', container). length > 0) {var inputval = $.trim ($ ('. Mb-input ', container). Val ())
                        ;
                    Self._renderhtml (Inputval,container); }else {var $thisParent = $ (this). Closest (_config.btncontainer), $cont
                        Ainer = $ (this). closest (_CONFIG.CONTAINERCLS); Otherwise, just turn the button into input box $ ($thisParent). prepend (' <input placeholder= "Enter tags here" class= "mb
                        -input ">");
                        !$ (This). Hasclass (' hidden ') && $ (this). addclass (' hidden ');
                        $ ('. Mb-input ', $container). focus ();
                    Triggers event self._blurenv ('. Mb-input '), $ (this), $container) when the focus is lost;
}
                });            });
         }, * * Add HTML Tag * @method _renderhtml * @param {curvalue,tparent} current value current outermost container
                * * _renderhtml:function (curvalue,tparent) {var self = this, _config = Self.config,
    
            _cache = Self.cache; var html = ' <li class= ' Mb-tag "data-tag=" ' +curvalue+ ' "> ' + ' <div class=" mb-tag-content
                                "> ' + ' <span class=" Mb-tag-text "> ' +curvalue+ ' </span> ' +
                        ' <a class= ' mb-tag-remove ' ></a> ' + ' </div> ' +
            ' </li> ';
                    if ($ ('. Mb-tag ', _config.listitemcls). length > 0) {$ ('. Mb-tag ', _config.listitemcls). each (function () {
                    var Datatag = $ (this). attr (' Data-tag ');
                    _cache.arrs.push (Datatag); _cache.arrs = Self.unique (_cache.arrs);
            });
            var curindex = Self._indexof (Curvalue,_cache.arrs);
            if (Curindex < 0) {$ (tparent). Find (_config.listitemcls). append (HTML);
                }else {alert (' duplicates, please re-enter ');
            return true;
        }//Shutdown event self._closedenv (); }, * * @method _blurenv * @param {target, $btn, $container} current input box target element button current outermost Container */_blurenv:function (target, $btn, $container) {var self = this, _config =
                
            Self.config, _cache = Self.cache;
                $ (target). Unbind (' blur '). Bind (' blur ', function (e) {var tagval = $.trim ($ (this). Val ());
            Blur ($ (this), tagval);
                
            });
                function blur ($this, Tagval) {if (Tagval = = ") {return; }else {
                    Self._renderhtml (Tagval, $container);
                    var curindex = Self._indexof (Tagval,_cache.arrs);
                        if (Curindex < 0) {$ (target). Remove ();
                        Self._removeitem (TAGVAL,_CACHE.ARRS);
    
                        _cache.arrs = Self.unique (_cache.arrs);
                    $ ($BTN). Removeclass (' hidden '); 
                }}//Enter key if ($ (target). length > 0) {
                        $ (target). each (function () {$ (this). Unbind (' KeyUp '). Bind (' KeyUp ', function (e) {
                        E.preventdefault ();  var keycode = e.keycode, Curvalue = $.trim ($ (this). Val ()), tparent
                        = $ (this). closest (_CONFIG.CONTAINERCLS); if (keycode = = 13) {//Empty first value call _renderhtml method to make the ENTER keyTriggers the Blur event $ (this). Val (');
                            var istrue = self._renderhtml (curvalue,tparent);
                                if (istrue) {$ (this). Val (Curvalue);
                            Return
                            } $ (this). Remove ();
                        $ ($BTN). Removeclass (' hidden ');
                }
                    });
            }); }, * * Shutdown Event/_closedenv:function () {var self
    
            = this, _config = self.config, _cache = Self.cache; Closes the X button event if ($ ('. Mb-tag-remove ', _config.listitemcls). length > 0) {$ ('. Mb-tag-remove ', _con
                        FIG.LISTITEMCLS). each (function () {$ (this). Unbind (' click '). Bind (' click ', function () { var LiparenT = $ (this). Closest (' Li '), Tagval = $.trim ($ (liparent). attr (' Data-tag '));
                        Self._removeitem (TAGVAL,_CACHE.ARRS);
    
                        _cache.arrs = Self.unique (_cache.arrs);
                    $ (liparent). Remove ();
                });
            });
         },/* Remove an item from the array * @method _removeitem * @param {Item,arr} current item Array * @return return the new array */_removeitem:function (Item,arr) {var self = this, index =
            Self._indexof (Item,arr);
            if (Index >-1) {Arr.splice (index, 1); },/* index jquery1.8 indexof will be reordered so no jquery indexof/_indexof:function (i
            Tem,arr) {if (Array.prototype.indexOf) {return arr.indexof (item);
      }else {for (var i = 0, Ilen = arr.length; i < Ilen; i+=1) {              if (arr[i] = = Item) {return i;
                    }else {return-1; }},/* Remove array Duplicates * @method unique * @param arr AY * @return NewArray/unique:function (arr) {arr = arr | |
            [];
            var obj = {}, ret = []; for (var i = 0, Ilen = arr.length i < Ilen; i+=1) {var CurItem = Arr[i], curitemty
                PE = typeof (CurItem) + CurItem;
                    if (Obj[curitemtype]!== 1) {Ret.push (CurItem);
                Obj[curitemtype] = 1;
        } return ret; }
};

Demo download

Good night because of the time. If there is a problem, please leave a message! Ok!

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/