<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>MobileMe Form Set</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<style type="text/css">
body {
font: 12px Tahoma, Arial;
}
div.light_button {
margin: 0;
padding: 0;
background: transparent none repeat scroll 0 0;
border: none;
cursor: pointer;
min-width: 80px;
margin: 0 5px 0 0;
vertical-align: baseline;
font-size: 12px;
color: #404040;
outline: none;
float: left;
}
div.light_button .outer {
background: transparent url(images/light_button_left.png) no-repeat scroll left top;
display: block;
margin-left: 1px;
padding: 0 4px 0 2px;
width: 100%;
outline: none;
}
div.light_button .outer .label {
margin-left: 6px !important;
right: -1px !important;
width: auto !important;
position: relative;
background: transparent url(images/light_button_right.png) no-repeat scroll right top;
color: #282929;
/*font-weight: bold;*/
height: 14px;
padding: 4px 9px 6px;
text-align: center;
text-indent: -7px;
text-shadow: 0 1px 1px white;
outline: none;
}
div.light_button.active .outer {
background: transparent url(images/light_button_left.png) no-repeat 0 -30px;
}
div.light_button.active .outer .label {
background: transparent url(images/light_button_right.png) no-repeat right -30px;
color: #4B4D4E;
}
div.light_button.submit .outer {
background: transparent url(images/light_button_left.png) no-repeat 0 -90px;
}
div.light_button.submit .outer .label {
background: transparent url(images/light_button_right.png) no-repeat right -90px;
color: #2F3439;
}
div.light_button.submit.active .outer {
background: transparent url(images/light_button_left.png) no-repeat 0 -120px;
}
div.light_button.submit.active .outer .label {
background: transparent url(images/light_button_right.png) no-repeat right -120px;
color: #213854;
}
div.light_button.disabled
{
cursor: default;
}
div.light_button.disabled .outer, div.light_button.disabled.active .outer {
background: transparent url(images/light_button_left.png) no-repeat scroll left top;
}
div.light_button.disabled .outer .label, div.light_button.disabled.active .outer .label {
background: transparent url(images/light_button_right.png) no-repeat scroll right top;
color: #AAA;
text-shadow: 0 1px 1px #EEE;
}
</style>
<!--[if IE]>
<style type="text/css">
div.light_button {
width:100px;
}
div.light_button .label {
padding: 6px 9px 5px 6px;
}
</style>
<![endif]-->
</head>
<body>
<div class="light_button">
<div class="outer">
<div class="label">
亮蓝 - 默认
</div>
</div>
</div>
<div class="light_button submit">
<div class="outer">
<div class="label">
亮蓝 - 提交
</div>
</div>
</div>
<div class="light_button disabled">
<div class="outer">
<div class="label">
亮蓝 - 关闭
</div>
</div>
</div>
<div style="clear:left"></div>
<script type="text/javascript">
$('div.light_button').click(function () {
var clicked_button = $(this);
clicked_button.addClass('active');
setTimeout(function () {
clicked_button.removeClass('active');
}, 250);
});
</script>
</body>
</html>
