Select tag beautification-JS plug-ins, post-loading _ form special effects

& Lt; select & gt; the appearance of the tag is annoying. Different browsers have different appearances. for IE alone, a single version has an appearance and cannot be modified with CSS. Here I will share my beautification methods for & lt; select & gt.

The appearance of tags is annoying. Different browsers are inconsistent. for IE alone, a single version has a look and cannot be modified with CSS.In this caseThe Beautification methods are shared.
Advantage: Reserved, Only changes the appearance, does not change, does not interfere with Form behavior, and loads JS later. (Note: This script depends on jQuery)Nothing to say, all in the code.At the bottom. The Code is as follows:$ (Document). ready (function (){// Find the one to beautifyMark, we use a class name "beautify" to determine, without this styleWill be ignoredVar selects = $ ("select. beauts ");If (selects. length> 0 ){// Add one at the bottom of the CodeTo carry and display the drop-down box options$ ("Body"). append ("");// Beautify the image.Selects. each (function (){// Give this (that is) Set an alias, which will be used in the following anonymous functions.
Var select = this;

// Create,. Dummy will be used for this classDefine special styles
// SetCopy some attributes and styles of to this dummy input// After creationInsert the dom to keep up with the originalVar input = $ ("")
. Attr ("disabled", this. disabled)
. Css ("width", parseInt (this. style. width) + "px ")
. Css ("display", this. style. display)
. InsertAfter (this)
. Val (this. options [this. selectedIndex]. text );

// SetHide it. Do not define display: none in. beautify, because we have to use it when js loading fails.This. style. display = "none ";// WhenWhen clicked
Input. click (function (){
// Call out the created

And clear the content.
// SetThe style sheet is passed to it.These style definitions are used for modification.Var p = $ ("# dummydata "). Empty (). Attr ("class", select. className );// SetWidth// Here we determine a special class name "extend"// If there is a. extend, the width is subject to additional custom control; otherwise, the width isConsistent
$ (Select). hasClass ("extend ")
? P.css ("width ","")
: P.css ("width", $ (this). innerWidth ());

// SetCopy

Inside,Corresponding to a tag
For (var I = 0; I <select. options. length; I ++ ){
Var item = select. options [I];
Var a = $ ("")
. Css ("color", item. style. color)
. AddClass (item. className)
. Html (item. text)
. AppendTo (p );
If (I = select. selectedIndex ){
A. addClass ("selected ");
}
// When the option is clicked,The content is displayed as the corresponding, Disable

Layer, and send events to the originalA. click (function (){Var n = $ (this). index ();Select. selectedIndex = n;Input. val (select. options [n]. text );P. hide ();$ (Select). change ();});}// Here we will judge a special class name "noscroll"// When there are too many options, a scroll bar will appear in the Option List by default; however, if there is. noscroll modifier, no scroll bar will be forcedVar noscroll = (select. options. length <10 | $ (select). hasClass ("noscroll "));If (/msie 6/I. test (window. navigator. userAgent )){P.css ("height", noscroll? "Auto": "215px" ).css ("overflow-y", noscroll? "Hidden": "scroll ");} Else {P.css ("max-height", noscroll? "Pixel PX": "215px ");}// Here we determine a special class name "onside"// If there is a. onside modifier, the pop-up option layer will be on the side, otherwise it will be on the following// Note: two functions locateBeside and locateBelow are used in the js library.$ (Select). hasClass ("onside ")? P. locateBeside (this,-2): P. locateBelow (this,-4 );// Repeated clicksAnd so on.
If (window. activeDummySelect = select ){
P. slideToggle (100 );
} Else {
P. hide (). slideDown (100 );
Window. activeDummySelect = select;
}

// When a scroll bar exists, we need to scroll the scroll bar to the position of the selected item.
If (! Select. selectedIndex> 6 & p [0]. scrollHeight> p. height ()){
P. scrollTop (select. selectedIndex-3) * p [0]. firstChild. offsetHeight );
}
});
});

// Do not forget to hide it when you click the free area on the webpage.

$ (Document). click (function (e ){
If (! Certificate (e.tar get). is (". dummy ")&&! Objects (e.tar get). is ("# dummydata ")){
$ ("# Dummydata"). hide ();
}
});
}
});

Two methods are used in the code above: locateBeside and locateBelow, which are extensions of jQuery in my js library. By the way, two methods locate and locateCenter are provided.
The Code is as follows:

The Code is as follows:

$. Fn. extend ({
Locate: function (x, y ){
If (this.css ("position") = "fixed "){
Y-= $ (document). scrollTop ();
}
Return this.css ({left: x, top: y });
},
LocateBeside: function (el, adjustX ){
Var p = $ (el). offset (),
W1 = $ (el). outerWidth (),
W2 = this. outerWidth (),
H2 = this. outerHeight (),
X = p. left + w1 + 5 + (adjustX | 0 ),
Y = p. top;
If ($ (document). width () <x + w2 ){
X = p. left-w2-5-(adjustX | 0 );
}
If ($ (document). height () <y + h2 ){
Y = p. top-(y + h2 + 15-$ (document). height ());
}
Return this. locate (x, y );
},
LocateBelow: function (el, adjustY ){
Var p = $ (el). offset ();
Return this. locate (p. left, p. top + $ (el). outerHeight () + 3 + (adjustY | 0 ));
},
LocateCenter: function (){
Return this. locate (
($ (Window). width ()-this. width ()/2,
($ (Window). height ()-this. height ()/2 + $ (document). scrollTop ()
);
}
});

Finally, we provide some examples of style table definition and the demonstration effect:

The Code is as follows:

Input. dummy {background-image: url (/static/images/combo.gif); background-position: right 12px; background-repeat: no-repeat; cursor: pointer! Important ;}
Input. dummy: hover, input. dummy: focus {background-image: url (/static/images/combo_hover.gif );}
# Dummydata {position: absolute; z-index: 20; border: 1px solid # a4601e; background-color: #393939; max-height: 200px; overflow: auto ;}
# Dummydata a {display: block; color: # ddd; line-height: 25px; text-indent: 3px; text-overflow: ellipsis ;}
# Dummydata a: hover {color: # 198cef; text-decoration: none ;}
# Dummydata. matrix {width: 208px; padding: 5px;}/* matrix effect */
# Dummydata. matrix a {float: left; width: 33% ;}
# Dummydata. matrix-large {width: 640px; padding: 5px;}/* matrix-large effect */
# Dummydata. matrix-large a {float: left; width: 25% ;}
# Dummydata a. fullwidth {float: none ;}
# Dummydata a. delimiter {float: none; width: 100%; height: 10px; visibility: hidden ;}
# Dummydata a. selected {color: yellow ;}

The style defined above

Only a few class modifications are required in html.