jquery ui 代码重写（还没想到更好说法，暂时这么叫吧）
来源：互联网 发布：淘宝打折软件怎么设置 编辑：程序博客网 时间：2024/05/01 21:46
下面是本人临摹jquery ui 页面写的，这个过程对本人有很大启发，建议有时间的人，都自己看一遍。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css框架</title>
<link href="css/ui-lightness/page.css" type="text/css" rel="stylesheet">
<style type="text/css">
body{ font:62.5% "微软雅黑", "黑体","Trebuchet MS",sans-serif; margin:50px; }
.demoHeaders{ margin-top:2em;}
#dialog-link{ text-decoration:none; padding:.4em 1em .4em 20px; position:relative}
#dialog-link span.ui-icon{ left:0.2em; margin:-8px 5px 0 0; position:absolute; top:50%;}
.fakewindowcontain .ui-widget-overlay{ position:absolute;}
#icons{ padding:0; margin:0;}
#icons li{ position:relative; margin:2px; padding:4px 0; cursor:pointer; float:left; list-style:none;}
#icons span.ui-icon{ margin:0 4px; float:left;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/page.js"></script>
</head>
<body>
<h1 style="font-size:18px; background-color:#F00;">Welcome to jQuery UI By Miss Ma! </h1>
<div class="ui-widget">
<p>This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.10.3.custom.min.js), and css/ui-lightness/jquery-ui-1.10.3.custom.min.css which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p>
<p>You've downloaded components and a theme that are compatible with jQuery 1.6+. Please make sure you are using jQuery 1.6+ in your production environment. </p>
</div>
<h1>YOUR COMPONENTS: </h1>
<!--可折叠菜单 -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 id="ui-accordion-accordion-header-0" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>First</h3>
<div style="display:none;">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Second</h3>
<div id="ui-accordion-accordion-panel-0" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display:block; height:14px;">Phasellus mattis tincidunt nibh.</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">Third</h3>
<div style="display:none;">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<!--自动完成输入窗 -->
<h2 class="demoHeaders">Autocomplete </h2>
<div>
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span><!--用它来控制结果 -->
<input id="autocomplete" class="ui-autocomplete-input" title="type "a"" autocomplete="off" >
</div>
<!--button按钮 -->
<h2 class="demoHeaders">button</h2>
<button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" arial-disabled="false"><span class="ui-button-text">A button element</span></button>
<button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" role="button" arial-disabled="false"><span class="ui-button-text">A button element</span></button>
<form style="margin-top:1em;">
<div id="radioset" class="ui-buttonset">
<input name="radio" type="radio" id="radio1" class="ui-helper-hidden-accessible " ><label for="radio1" title="choice1" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left"><span class="ui-button-text">choice1</span></label>
<input name="radio" type="radio" id="radio2" checked="checked" class="ui-helper-hidden-accessible " ><label for="radio2" title="choice2" class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" style="margin-left:-1px;"><span class="ui-button-text">choice2</span></label>
<input name="radio" type="radio" id="radio3" class="ui-helper-hidden-accessible"><label for="radio3" title="choice3" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-hover"><span class="ui-button-text">choice3</span></label>
</div>
</form>
<!--tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="0" arial-controls="tabs-1" arial-labelledby="ui-id-2" arial-selected="false"><a href="#tabs-1" id="ui-id-1" class="ui-tabs-anchor">First</a></li>
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a href="#tabs-2" id="ui-id-2" class="ui-tabs-anchor">Second</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-3" id="ui-id-3" class="ui-tabs-anchor">Third</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<!--Dialog -->
<h2 class="demoHeaders">Dialog</h2>
<p>
<a id="dialog-link" href="#" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>
Open Dialog
</a>
</p>
<br>
<p>
<a id="dialog-link" href="#" class="ui-state-default ui-corner-all ui-state-hover">
<span class="ui-icon ui-icon-newwin"></span>
Open Dialog
</a>
</p>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-front ui-dialog-buttons ui-draggable ui-resizable" style="height:auto; width:400px; position:absolute; top:816.5px; left:428.5px;" tabindex="-1" role="dialog" aria-describedby="dialog" aria-labelledby="ui-id-5">
<div class="tou ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-5" class="ui-dialog-title">Dialog Title</span>
<button class="ui-button ui-wedget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" arial-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
</div>
<div class="shen ui-dialog-content ui-widget-content" style="height:auto; min-height:50px; max-height:none; width:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="wei ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">ok</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">cancel</span>
</button>
</div>
</div><!--边线效果 -->
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
<div class="fakewindowcontain" style="position:relative; width:96%; padding:1% 2%; height:240px; overflow:hidden;">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<div class="ui-overlay">
<div class="ui-widget-overlay"></div>
<div class="ui-widget-shadow ui-corner-all" style=" width:302px; height:152px; position:absolute; left:50px; top:30px;"></div>
</div>
<div class="ui-widget ui-widget-content ui-corner-all" style="width:280px; height:130px; position:absolute; top:30px; left:50px; padding:10px;">
<div class="ui-dialog-content ui-widget-content" style="background:none; border:0;" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n">
<span class="ui-icon"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
<!--滑块 -->
<h2 class="demoHeaders">Slider</h2>
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left:17%; width:50%;"></div>
<a href="" class="ui-slider-handle ui-state-default ui-corner-all" style="left:17%;"></a>
<a href="" class="ui-slider-handle ui-state-default ui-corner-all" style="left:66%;"></a>
</div>
<!--日期选择控件 -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker" class="hasDatepicker">
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display:block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a href="#" class="ui-datepicker-prev ui-corner-all" title="prev" data-event="click" data-handler="prev">
<span class="ui-icon ui-icon-circle-triangle-w">prev</span>
</a>
<a href="#" class="ui-datepicker-next ui-corner-all" title="next" data-event="click" data-handler="next">
<span class="ui-icon ui-icon-circle-triangle-e">next</span>
</a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">September</span>
<span class="ui-datepicker-year">2013</span>
</div>
</div>
<table class="ui-datepicker-calender">
<thead>
<tr>
<th class="ui-datepicker-week-end">
<span title="sunday">Su</span>
</th>
<th>
<span title="Monday">Mo</span>
</th>
<th>
<span title="Tusday">Tu</span>
</th>
<th>
<span title="Wednesday">We</span>
</th>
<th>
<span title="Thursday">Th</span>
</th>
<th>
<span title="Firday">Fr</span>
</th>
<th>
<span title="Saturday">Sa</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">1</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">2</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">3</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">4</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">5</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">6</a>
</td>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">7</a>
</td>
</tr>
<tr>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">8</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">9</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">10</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">11</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">12</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">13</a>
</td>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">14</a>
</td>
</tr>
<tr>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">15</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">16</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">17</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">18</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">19</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">20</a>
</td>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">21</a>
</td>
</tr>
<tr>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">22</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default ui-state-highlight ui-state-active">23</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">24</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">25</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">26</a>
</td>
<td data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">27</a>
</td>
<td class="ui-datepicker-week-end" data-year="2013" data-month="8" data-event="click" data-handler="selectDay">
<a href="#" class="ui-state-default">28</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--进度条 -->
<h2 class="demoHeaders">Progressbar</h2>
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width:20%;"></div>
</div>
<!--高亮显示和错误提示 -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style=" margin-top:20px; padding:0 0.7em;">
<p>
<span class="ui-icon ui-icon-info" style="float:left; margin-right:.3em;"></span>
<strong>Hey!</strong>
Sample ui-state-highlight style.
</p>
</div>
</div>
<br>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding:0 0.7em;">
<p>
<span class="ui-icon ui-icon-alert" style="float:left; margin-right:.3em;"></span>
<strong>Alert:</strong>
Sample ui-state-error style.
</p>
</div>
</div>
<br>
<br>
<div style="background:url(css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) repeat-x 50% top #eeeeee;; width:200px; height:200px; border:1px solid #dddddd; font-size:12px; border-radius:4px; padding:.5em;">
123测试背景原理 背景图片空白部分用背景色补全，背景色一定是渐变背景图片底部的颜色，这样就实现了不突变过渡效果
</div>
</body>
</html>
下面是css
/***************layout helper样式******************/
.ui-helper-reset{ margin:0; padding:0; border:0; outline:0; text-decoration:none; list-style:none; line-height:1.3; font-size:100%;}
.ui-helper-hidden-accessible{ border:0; width:1px; height:1px; clip:rect(0 0 0 0); position:absolute; overflow:hidden; margin:-1px; padding:0;}
/*重置样式*/
.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:""; display:table; border-collapse:collapse;}
.ui-helper-clearfix:after{ clear:both;}
.ui-helper-clearfix{ min-height:0;/** ie7 support*/}
.ui-front{ z-index:100;}
/***状态样式***/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ border:1px solid #cccccc; background:url(images/ui-bg_glass_100_f6f6f6_1x400.png) repeat-x scroll 50% 50%; color:#1C94C4; font-weight:bold;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited{ color:#1C94C4; text-decoration:none;}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited{ color:#EB8F00; text-decoration:none;}
/***************button样式******************/
.ui-button-text-only,.ui-button-text{ padding:.4em 1em}
.ui-button-text-only .ui-button-text{ padding:0.4em 1em;}
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text{ padding:.4em; text-indent:-9999999px;}
.ui-button{ display:inline-block; position:relative; padding:0; line-height:normal; margin-right:.1em; cursor:pointer; vertical-align:middle; text-align:center; overflow:visible;}
.ui-button .ui-button-text{ display:block; line-height:normal;}
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active{ text-decoration:none;}
.ui-button-icon-only{ width:2.2em;}
button.ui-button-icon-only{ width:2.4em;}
/***************button集样式******************/
.ui-buttonset{ margin-right:7px;}
.ui-buttonset .ui-button{ margin-left:0; margin-right:-.3em;}
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left:.5em;}
/***************折叠菜单样式******************/
.ui-accordion .ui-accordion-header{ display:block; cursor:pointer; position:relative; margin-top:2px; padding:.5em .5em .5em .7em; min-height:0;}
.ui-accordion .ui-accordion-icons{ padding-left:2.2em;}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon{ position:absolute; left:0.5em; top:50%; margin-top:-8px;}
.ui-icon-triangle-1-e{ background-position:-32px -16px;}
.ui-accordion .ui-accordion-content{ padding:1em 2.2em; overflow:auto; border-top:0;}
.ui-button{ display:inline-block; padding:0px; position:relative; line-height:normal; margin-right:.1em; cursor:pointer; vertical-align:middle; text-align:center; overflow:visible;}
.ui-icon{ background-repeat:no-repeat; display:block; text-indent:-99999px; overflow:hidden;}
.ui-state-default .ui-icon{ background-image: url(images/ui-icons_ef8c08_256x240.png);}
.ui-widget-header .ui-icon{ background-image:url(images/ui-icons_ffffff_256x240.png)}
.ui-state-active{ background:url(images/ui-bg_glass_65_ffffff_1x400.png) repeat-x scroll 50% 50% #ffffff; border:1px solid #FBD850; color:#EB8F00; font-weight:bold;z-index:10;}
.ui-icon{ height:16px; width:16px;}
.ui-icon, .ui-widget-content .ui-icon { background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-highlight .ui-icon { background-image: url(images/ui-icons_228ef1_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(images/ui-icons_ffd27a_256x240.png); }
.ui-icon-newwin{ background-position:-48px -80px;}
.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{ border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
/***************corner样式******************/
.ui-corner-all,.ui-corner-top,.ui-corner-tl,.ui-corner-left{ border-top-left-radius:4px;}
.ui-corner-all,.ui-corner-top,.ui-corner-tr,.ui-corner-right{ border-top-right-radius:4px;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-br,.ui-corner-right{ border-bottom-right-radius:4px;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-bl,.ui-corner-left{ border-bottom-left-radius:4px;}
/***************状态样式******************/
.ui-state-hover{ border:1px solid #FBCB09; background:url("images/ui-bg_glass_100_fdf5ce_1x400.png") repeat-x scroll 50% 50% #FDF5CE; color:#C77405; font-weight:bold;}
.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{ border:1px solid #fed22f; background:#ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color:#363636}
/***************tabs样式******************/
.ui-tabs{ position:relative; padding:.2em;}
.ui-tabs .ui-tabs-nav{ margin:0px; padding:0.2em 0.2em 0 0.2em;}
.ui-tabs .ui-tabs-nav li a{ float:left; padding:.5em 1em; text-decoration:none;}
.ui-tabs .ui-tabs-nav li{ list-style:none; float:left; margin:1px .2em 0 0; border-bottom-width:0px; padding:0px; white-space:nowrap;}
.ui-tabs .ui-tabs-nav li a,.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active{ margin-bottom:-1px; padding-bottom:1px;}
.ui-tabs .ui-tabs-panel{ background:none; display:block; padding:1em 1.4em; border-width:0;}
/***************dialog样式******************/
.ui-dialog{ position:absolute; top:0px; left:0px; padding:.2em; outline:none;}
.ui-draggable .ui-dialog-titlebar{ cursor:move;}
.ui-dialog .ui-dialog-titlebar{ padding:0.4em 1em; position:relative;}
.ui-dialog .ui-dialog-title{ float:left; margin:0.1em 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:90%;}
.ui-dialog .ui-dialog-titlebar-close{ position:absolute; top:50%; right:.3em; margin:-10px 0 0 0; width:21px; height:20px; padding:1px;}
.ui-dialog .ui-dialog-content{ background:none; border:0; position:relative; padding:.5em 1em; overflow:auto;}
.ui-dialog .ui-dialog-buttonpane{ text-align:left; border-width:1px 0 0 0; background:none; margin-top:.5em; padding:.3em 1em .5em .4em;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{ float:right;}
.ui-dialog .ui-dialog-buttonpane button{ margin:.5em .4em .5em 0; cursor:pointer;}
/***************overlay样式******************/
.ui-resizable{ position:relative;}
.ui-widget-overlay{ position:fixed; top:0; left:0; width:100%; height:100%;}
.ui-widget-overlay{ background:#666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) repeat 50% 50% scroll; opacity:.5; filter:Alpha(opacity=50);}
.ui-widget-shadow{ margin:-5px 0 0 -5px; padding:5px; background:#000000 url(images/ui-bg_flat_10_000000_40x100.png) repeat-x 50% 50% scroll; opacity:.2; filter:Alpha(opacity=20); border-radius:5px;}
/***************位置样式******************/
.ui-icon-closethick{ background-position:-98px -129px;}
.ui-icon-carat-1-n{ background-position:0 0;}
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/***************滑块样式******************/
.ui-slider{ position:relative; text-align:left;}
.ui-slider .ui-slider-range{ position: absolute; z-index:1; font-size:.7em; display:block; border:0; background-position:0 0;}
.ui-slider-horizontal{ height:0.8em;}
.ui-slider-horizontal .ui-slider-range{ top:0; height:100%;}
.ui-slider .ui-slider-handle{ position:absolute; width:1.2em; height:1.2em; z-index:2; cursor:default;}
.ui-slider-horizontal .ui-slider-handle{ top:-.3em; left:-.6em}
/***************组件样式******************/
.ui-widget{ font-family:"微软雅黑", "黑体",Arial,sans-serif; font-size:1.1em;}
.ui-widget-content{ background: url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) repeat-x scroll 50% top #eeeeee; border:1px solid #dddddd; color:#333333;}
.ui-widget-header{ border:1px solid #E78F08; background:#F6A828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x; color:#ffffff; font-weight:bold;}
.ui-widget-header a{ color:#ffffff;}
.ui-widget .ui-widget{ font-size:1em;}
/***************日期选择组件样式******************/
.ui-datepicker{ width:17em; padding:.2em .2em 0; display:none;}
.ui-datepicker .ui-datepicker-header{ position:relative; padding:.2em 0;}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{ position:absolute; top:2px; height:1.8em; width:1.8em;}
.ui-datepicker .ui-datepicker-prev{ left:2px;}
.ui-datepicker .ui-datepicker-next{ right:2px;}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker-next span{ display:block; position:relative; top:50%; left:50%; margin-left:-8px; margin-top:-8px;}
.ui-datepicker .ui-datepicker-title{ margin:0 2.3em; line-height:1.8em; text-align:center;}
.ui-datepicker table{ margin:0 0 0.4em; border-collapse:collapse; font-size:.9em; width:100%;}
.ui-datepicker th{ border:0; font-weight:bold; padding:.7em .3em;}
.ui-datepicker td{ border:0; padding:1px;}
.ui-datepicker td span,.ui-datepicker td a{ display:block; padding:.2em; text-align:right; text-decoration:none;}
/***************进度条样式******************/
.ui-progressbar{ height:2em; text-align:left; overflow:hidden;}
.ui-progressbar .ui-progressbar-value{ margin:-1px; height:100%;}
表现结果如图：
- jquery ui 代码重写（还没想到更好说法，暂时这么叫吧）
- 没想到这么多年了这个ID还能用
- 还叫随记吧
- 信息管理器（还没有想到好得名字，暂时叫这个吧！）
- 编写更好的JQuery代码
- 编写更好的jQuery代码
- 编写更好的jQuery代码
- 编写更好的jQuery代码
- jQuery代码怎么写更好
- google好，没想到这么好
- csdn 我还真没想到
- 暂时提高UI响应速度的几行代码
- 1608 - Non-boring sequences（折半递归。。暂且这么叫吧）
- 编写更好的jQuery代码的建议
- 编写更好的jQuery代码的建议
- 编写更好的jQuery代码的建议
- 编写更好的jQuery代码的建议
- 编写更好的jQuery代码的建议
- Eclipse helios 配置struts2图解 .
- 李开复：给中国学生的一封信
- Android WindowManager$BadTokenException异常
- 《班级管理系统》sql语句
- Java集合类详解
- jquery ui 代码重写（还没想到更好说法，暂时这么叫吧）
- Androidpn 消息推送总结
- JAVA中clone浅复制
- hadoop 无法启动namenode
- Java多线程之Callable接口的实现
- 嵌入式Linux下RTC时间的读写
- UVA 11552 DP水题
- 几个很好的博客地址
- 模拟AndroidPN Client(1)——AndroidPN源码简析
