Home > Developer > JavaScript
Some people in the Forum often ask how to beautify the Select tag using CSS. In fact, all the cool things you see are implemented using javascript. I tried to implement the basic functions yesterday. Share it with you. First, let's take a look at the preview: http://www.iwcn.net/demo/select.
[Functional requirements]
1. The call should be convenient. After the call is completed, it should be as follows:
Copy codeThe Code is as follows:
Function loadSelect (selectobj ){
// Input a select object to beautify its style
}
2. Do not change the original form items, and the page code of the form will not be damaged:
Copy codeThe Code is as follows:
<Form name = "f" onsubmit = "getResult ();">
<Fieldset>
<Legend> User Registration </legend>
<Div>
<Label for = "username"> account </label>
<Input type = "text" id = "username" name = "username"/>
</Div>
<Div>
<Label for = "pwd"> password </label>
<Input type = "password" name = "pwd" id = "pwd"/>
</Div>
<Div>
<Label for = "province"> province </label>
<Select id = "province" name = "province">
<Option value = "10"> Jiangxi </option>
<Option value = "11"> Fujian </option>
<Option value = "12"> Guangdong </option>
<Option value = "13"> Zhejiang </option>
</Select>
</Div>
</Fieldset>
<Input type = "submit" value = "submit" name = "btnSub"/>
</Form>
[Implementation]
Step 1: Hide select in the form.
Why? It's very easy, because this guy is too stubborn to use css to get what you want. So we can kill it.
Step 2: Use a script to find the absolute position of the select tag on the webpage.
We use the DIV label at that position to make a fake, nice-looking alternative.
Step 3: Use a script to read the values in the select tag.
Although it is hidden, the options in it are still useful.
Step 4: when the user clicks the "select" tab, that is, the div. We use a div to move it to the bottom of a div. This is the replacement of options.
This is basically the case. Next we will implement it step by step!
[Preparations]
1. Think about how you want to beautify the select statement and prepare the corresponding image. I have prepared two small pictures, that is, drop-down arrow 1 and drop-down arrow 2 are the default style, and 2 are the style that the mouse moves over.
2. Write a normal form submission page, such as the following. Note that I have defined the basic CSS style for select, added the code for calling the js file in the header, and added the script for calling the function in the body.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN"> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <meta http-equiv =" Content-Language "content =" zh-CN "/> <title> beautify Select with javascript </title> <style type = "text/css"> select {width: 200px; height: 20px ;} </style> </pead> <body> use javascript to simulate select for beautification <p> author's blog </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
[Compile javascript]
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "select. js"> </script>
Create a new js file and save it as select. js. The rest of the work is done in this js.
Function Name: loadSelect (obj );
Parameter: select object
Related functions:
Copy codeThe Code is as follows:
Function Offset (e)
// Obtain the absolute position of the tag
{
Var t = e. offsetTop;
Var l = e. offsetLeft;
Var w = e. offsetWidth;
Var h = e. offsetHeight-2;
While (e = e. offsetParent)
{
T + = e. offsetTop;
L + = e. offsetLeft;
}
Return {
Top: t,
Left: l,
Width: w,
Height: h
}
}
Step 1: record the absolute position of the select statement. After a while, you will know that you should be there.
Var offset = Offset (obj );
// Here, Offset is a function used to obtain the absolute position of an object. Written outside the loadSelect () function. It has four attributes: top/left/width/height.
Step 2: Hide select.
Copy codeThe Code is as follows:
Obj. style. display = "none ";
Step 3: Virtualize a div instead of select
Copy codeThe Code is as follows:
Var iDiv = document. createElement ("div ");
IDiv. id = "selectof" + obj. name;
IDiv. style. position = "absolute ";
IDiv. style. width = offset. width + "px ";
IDiv. style. height = offset. height + "px ";
IDiv. style. top = offset. top + "px ";
IDiv. style. left = offset. left + "px ";
IDiv. style. background = "url(icon_select.gif) no-repeat right 4px ";
IDiv. style. border = "1px solid # 3366ff ";
IDiv. style. fontSize = "12px ";
IDiv. style. lineHeight = offset. height + "px ";
IDiv. style. textIndent = "4px ";
Document. body. appendChild (iDiv );
Step 4: Give the original select value that is not selected.
Copy codeThe Code is as follows:
IDiv. innerHTML = obj. options [obj. selectedIndex]. innerHTML;
Step 5: Add a mouse movement style for the Avatar.
Copy codeThe Code is as follows:
IDiv. onmouseover = function () {// move the mouse over
IDiv. style. background = "url(icon_select_focus.gif) no-repeat right 4px ";
}
IDiv. onmouseout = function () {// move the mouse
IDiv. style. background = "url(icon_select.gif) no-repeat right 4px ";
}
Step 6: Add Key mouse click events.
Copy codeThe Code is as follows:
IDiv. onclick = function () {// click with the mouse
If (document. getElementById ("selectchild" + obj. name )){
// Determine whether a div has been created
If (childCreate ){
// Check whether the current drop-down is enabled. If yes, close it. Yes.
Document. getElementById ("selectchild" + obj. name). style. display = "none ";
ChildCreate = false;
} Else {
Document. getElementById ("selectchild" + obj. name). style. display = "";
ChildCreate = true;
}
} Else {
// Initially, a div is placed under the previous div and used as an alternative to options.
Var cDiv = document. createElement ("div ");
CDiv. id = "selectchild" + obj. name;
CDiv. style. position = "absolute ";
CDiv. style. width = offset. width + "px ";
CDiv. style. height = obj. options. length * 20 + "px ";
CDiv. style. top = (offset. top + offset. height + 2) + "px ";
CDiv. style. left = offset. left + "px ";
CDiv. style. background = "# f7f7f7 ";
CDiv. style. border = "1px solid silver ";
Var uUl = document. createElement ("ul ");
UUl. id = "uUlchild" + obj. name;
UUl. style. listStyle = "none ";
UUl. style. margin = "0 ";
UUl. style. padding = "0 ";
UUl. style. fontSize = "12px ";
CDiv. appendChild (uUl );
Document. body. appendChild (cDiv );
ChildCreate = true;
For (var I = 0; I <obj. options. length; I ++ ){
// Add options in the original select label to li
Var lLi = document. createElement ("li ");
LLi. id = obj. options [I]. value;
LLi. style. textIndent = "4px ";
LLi. style. height = "20px ";
LLi. style. lineHeight = "20px ";
LLi. innerHTML = obj. options [I]. innerHTML;
UUl. appendChild (lLi );
}
Var liObj = document. getElementById ("uUlchild" + obj. name). getElementsByTagName ("li ");
For (var j = 0; j <obj. options. length; j ++ ){
// Add a mouse event for the li tag
LiObj [j]. onmouseover = function (){
This. style. background = "gray ";
This. style. color = "white ";
}
LiObj [j]. onmouseout = function (){
This. style. background = "white ";
This. style. color = "black ";
}
LiObj [j]. onclick = function (){
// Do two things. One is to save the selected items to the original select tag. If you do not do this, the select value cannot be obtained after the form is submitted.
Obj. options. length = 0;
Obj. options [0] = new Option (this. innerHTML, this. id );
// At the same time, we close the drop-down list.
Document. getElementById ("selectchild" + obj. name). style. display = "none ";
ChildCreate = false;
IDiv. innerHTML = this. innerHTML;
}
}
}
}
The last step is a bit more complex. Let's explain that the select statement has come out before we take this step, the next step is to add a div to simulate the drop-down option after the select statement is clicked. The options of the select tag is extracted using javascript and written as follows:
Copy codeThe Code is as follows:
<Div>
<Ul>
<Li> optionName </li>
<Li> optionName </li>
<Li> optionName </li>
</Ul>
</Div>
This is basically the case. There are still some defects. You can add them together if you have time!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
