<select> Label appearance problem is very annoying, each browser is inconsistent, simply on IE, a version of a look, can not be decorated with CSS.
In this will I share the beautification method of <select>.
Advantages: Still retain the use of <select>, only change the appearance, do not change the form behavior does not interfere, late loading JS. (Note: This script relies on jquery)
Don't say anything, it's all in the code.
| The code is as follows |
Copy Code |
| $ (document). Ready (function () {
To find the <select> tag that needs to be beautified, we use a class name "beautify" to determine that <select> without this style will be ignored
var selects = $ ("select.beautify");
if (Selects.length > 0) {
Add a <div> to the bottom of the code, to host and display the dropdown box options
$ ("Body"). Append ("<div id= ' dummydata ' style= ' position:absolute; Display:none ' ></div> ');
A landscaping.
Selects.each (function () {
Set an alias for this (that is, <select>) under this function, which will be used in the following anonymous function
var select = this;
Create a <input>,. Dummy will be used for our special style definition of <input> of this type
At the same time, copy some of the properties and styles of <select> to this dummy input
Once created, insert this <input> into the DOM, keeping up with the original <select>
var input = $ ("<input type= ' text ' readonly= ' readonly ' class= ' input dummy '/> ')"
. attr ("Disabled", this.disabled)
. CSS ("width", parseint (this.style.width) + "px")
. CSS ("display", This.style.display)
. InsertAfter (This)
. val (This.options[this.selectedindex].text);
Hide <select> don't define display:none in. Beautify because JS fails, we have to use it.
This.style.display = "None";
When <input class= ' dummy ' > was clicked
Input.click (function () {
Pull up the <div id= ' Dummydata ' that was created earlier and empty the contents
Pass the <select> style sheet to it, and when you need to decorate the <div>, rely on these style definitions
var div = $ ("#dummydata")
. Empty ()
. attr ("Class", select.classname);
Set the width of <div>
Here we judge a special class name "Extend"
If you have. Extend, the width will be subject to additional customization control; otherwise, width will default to <input>
$ (select). Hasclass ("Extend")
? Div.css ("width", "")
: Div.css ("width", $ (this). Innerwidth ());
<option> Copy to <div id= ' Dummydata ' >, a <option> corresponds to a <a> mark
for (var i = 0; i < select.options.length; i++) {
var item = Select.options[i];
var a = $ ("<a href= ' Javascript:void" (0); ' class= ' nowrap ' ></a> ')
. CSS ("color", Item.style.color)
. addclass (Item.classname)
. HTML (Item.text)
. Appendto (Div);
if (i = = Select.selectedindex) {
A.addclass ("selected");
}
When the selected item is clicked, the,<input> content is displayed as the corresponding <option> close the <div> layer while bubbling the event to the original <select>
A.click (function () {
var n = $ (this). index ();
Select.selectedindex = n;
Input.val (Select.options[n].text);
Div.hide ();
$ (select). Change ();
});
}
Here we judge a special class name "Noscroll"
When too many items are selected, the default is to have scroll bars in the list of options, but if there are. Noscroll adornments, the scroll bars are not enforced
var noscroll = (Select.options.length < | | $ (SELECT). Hasclass ("Noscroll"));
if (/msie 6/i.test (window.navigator.userAgent)) {
Div.css ("height", noscroll?) "Auto": "215px"). CSS ("Overflow-y", Noscroll?) "Hidden": "scroll");
} else {
Div.css ("Max-height", Noscroll?) "10000px": "215px");
}
Here we judge a special class name "onside"
If there is a. Onside modifier, the pop-up option layer will be on the side, otherwise it is below
Note: here to use 2 functions locatebeside and Locatebelow is my JS library method, a little wait for another
$ (select). Hasclass ("onside")
? Div.locatebeside (This,-2)
: Div.locatebelow (this,-4);
Do some smart tuning on repetitive clicks <input> things like that
if (Window.activedummyselect = = Select) {
Div.slidetoggle (100);
} else {
Div.hide (). Slidedown (100);
Window.activedummyselect = select;
}
In the case of a scroll bar, we need to scroll the scroll bar to the position of the currently selected item.
if (!select.selectedindex > 6 && div[0].scrollheight > Div.height ()) {
Div.scrolltop ((select.selectedindex-3) * div[0].firstchild.offsetheight);
}
});
});
Finally, don't forget: When you click on the free area of the page, you should hide the <div #dummydata >
$ (document). Click (function (e) {
if (!$ (E.target). is (". Dummy") &&!$ (E.target). Is ("#dummydata")) {
$ ("#dummydata"). Hide ();
}
});
}
}); |
The above code said that the use of 2 methods: Locatebeside and Locatebelow, is my JS Library of the expansion of JQuery, by the way to give more than 2 methods locate and Locatecenter
| The code is as follows |
Copy Code |
| $.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 +-$ (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, some examples of style sheet definitions are given, as well as demonstration effects:
| The code is as follows |
Copy Code |
|
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; ove Rflow: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 effect chart above
The style-defined effect chart above
To do in HTML, just add a few class modifiers
-->
