What is the effect after CSS and jquery beautification? Isn't that refreshing! This is an effect I saw from another script library. I thought it was quite good, and then I implemented it myself using jquery. For your appreciation!
Let's just talk about it. Code :
Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Create a personalized single region and check box </title>
<Style type = "text/CSS">
*
{
Margin: 0;
Padding: 0;
Font-size: 12px;
}
. Formt
{
Width: 400px;
Margin: 10px auto;
Border: 1px solid # CCC;
Height: 200px;
Padding: 10px;
}
. Unselected
{
Background-image: url(rdo_off.png );
}
. Selected
{
Background-image: url(rdo_on.png );
}
. Unchecked
{
Background-image: url(chk_off.png );
}
. Checked
{
Background-image: url(chk_on.png );
}
. F_checkbox,. f_radio
{
Background-position: 3px center;
Background-repeat: No-Repeat;
Cursor: pointer;
Display: block;
Height: 16px;
Line-Height: 120%;
Padding: 4px 24px;
}
. Formt Input
{
Left:-9999px;
Position: absolute;
}
. Addcolor
{
Color: red;
}
</Style>
<SCRIPT type = "text/JavaScript" src = "jquery-1.4.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (
Function (){
// Single answer
$ (". F_radio"). Click (
Function (){
$ (This ). addclass ("selected "). removeclass ("unselected "). siblings (". selected "). removeclass ("selected "). addclass ("unselected ");
}
);
// Check
$ (". F_checkbox"). Toggle (
Function (){
$ (This). addclass ("checked ");
$ (This). Children ("input"). ATTR ("checked", "checked ");
},
Function (){
$ (This). removeclass ("checked ");
$ (This). Children ("input"). removeattr ("checked ");
}
);
}
);
</SCRIPT>
</Head>
<Body>
<Div class = "formt">
<Label class = "f_radio unselected">
<Input type = 'Radio 'name = "height" value = "dwarf"/>
Standard online tax administration </label>
<Label class = "f_radio unselected">
<Input type = "radio" name = "height" value = "average"/>
Online Tax Return Professional Edition </label>
<Label class = "f_radio unselected">
<Input type = "radio" name = "height" value = "Giant"/>
Others </label>
<HR/>
<Label class = "f_checkbox unchecked">
<Input type = "checkbox" name = "newsletter" value = "C" id = "C"/>
Invoice authentication </label>
<Label class = "f_checkbox unchecked">
<Input type = "checkbox" name = "newsletter" value = "D" id = "D"/>
Tax-related authentication </label>
</Div>
<Label for = "male">
Male </label>
<Input type = "checkbox" name = "sex" id = "male"/>
</Body>
</Html>
Pictures can be taken by yourself.
