<!-- Begin Tabs Container -->
<div class="content_container_1">
<h2>Tabs</h2>
<!-- Begin Tabs Area -->
<div id="tabs">
<ul>
<li><a href="https://www.php.cn/link/7570284063f2de77ff3145e5f321f2c5">自訂 jQuery UI 小工具主題的綜合指南 UI</a></li>
<li><a href="#tabs-2">自訂 jQuery UI 小工具主題的綜合指南</a></li>
<li><a href="#tabs-3">ThemeRoller</a></li>
</ul>
<!-- Begin Tabs Section #1 -->
<div id="tabs-1">
<p>
<img class="tabs_img" src="images/jquery_ui.png" style="max-width:90%" style="max-width:90%" alt="自訂 jQuery UI 小工具主題的綜合指南 UI" /><a href="http://jqueryui.com/" target="_blank" title="自訂 jQuery UI 小工具主題的綜合指南 UI">自訂 jQuery UI 小工具主題的綜合指南 UI</a> was built on top of the 自訂 jQuery UI 小工具主題的綜合指南 library and features ready to use widgets, advanced effects, animation, and much more.
</p>
<p>
Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, 自訂 jQuery UI 小工具主題的綜合指南 UI makes customizing your application fast and easy.
</p>
<p>
Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="自訂 jQuery UI 小工具主題的綜合指南 UI Official Website">official website</a> allow you to start using and learning 自訂 jQuery UI 小工具主題的綜合指南 UI right away. 自訂 jQuery UI 小工具主題的綜合指南 UI is also supported by a large and enthusiastic community of web developers.
</p>
<p>
<a href="http://jqueryui.com/" target="_blank" title="Visit The 自訂 jQuery UI 小工具主題的綜合指南 UI Website">Visit The Official 自訂 jQuery UI 小工具主題的綜合指南 UI Website</a>
</p>
</div>
<!-- End Tabs Section #1 -->
<!-- Begin Tabs Section #2 -->
<div id="tabs-2">
<p>
<img class="tabs_img" src="images/jquery.png" style="max-width:90%" style="max-width:90%" alt="自訂 jQuery UI 小工具主題的綜合指南" /><a href="http://jquery.com/" target="_blank" title="自訂 jQuery UI 小工具主題的綜合指南">自訂 jQuery UI 小工具主題的綜合指南</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development.
</p>
<p>
On the official 自訂 jQuery UI 小工具主題的綜合指南 website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on <a href="http://docs.jquery.com/Using_自訂 jQuery UI 小工具主題的綜合指南_with_Other_Libraries" target="_blank" title="How to use 自訂 jQuery UI 小工具主題的綜合指南 with other Libraries">How to use 自訂 jQuery UI 小工具主題的綜合指南 with other Libraries</a> and much more.
</p>
<p>
自訂 jQuery UI 小工具主題的綜合指南 is lightweight, CSS3 compliant and cross browser tested. 自訂 jQuery UI 小工具主題的綜合指南 was designed to change the way developers write JavaScript!
</p>
<p>
<a href="http://jquery.com/" target="_blank" title="Visit the 自訂 jQuery UI 小工具主題的綜合指南 Website">Visit the Official 自訂 jQuery UI 小工具主題的綜合指南 Website</a>
</p>
</div>
<!-- End Tabs Section #2 -->
<!-- Begin Tabs Section #3 -->
<div id="tabs-3">
<p>
<img class="tabs_img" src="images/themeroller.png" style="max-width:90%" style="max-width:90%" alt="自訂 jQuery UI 小工具主題的綜合指南" />ThemeRoller is a web application designed and developed for 自訂 jQuery UI 小工具主題的綜合指南 UI by <a href="http://www.filamentgroup.com/" target="_blank" title="Filament Group, Inc">Filament Group, Inc</a>.
</p>
<p>
The Themeroller application interface is divided into sections such as header/toolbar, content, clickable states, etc which allows you to design custom CSS themes for <a href="http://jqueryui.com/demos/" target="_blank" title="自訂 jQuery UI 小工具主題的綜合指南 UI widgets">自訂 jQuery UI 小工具主題的綜合指南 UI widgets</a>.
</p>
<p>
There is also a <a href="http://jqueryui.com/themeroller/#themeGallery" target="_blank" title="Theme Gallery">Theme Gallery</a> with pre-rolled themes if you do not want to design your own custom 自訂 jQuery UI 小工具主題的綜合指南 UI theme. Basic 自訂 jQuery UI 小工具主題的綜合指南 UI widget customization can be accomplished fairly easily by using a default themeroller theme and modifying the theme CSS to suit your needs.
</p>
<p>
There are additional articles about theming and customization on the official website including <a href="http://jqueryui.com/docs/Theming" target="_blank" title="Theming 自訂 jQuery UI 小工具主題的綜合指南 UI">"Theming 自訂 jQuery UI 小工具主題的綜合指南 UI"</a>, <a href="http://jqueryui.com/docs/Theming/API" target="_blank" title="自訂 jQuery UI 小工具主題的綜合指南 UI CSS framework">"自訂 jQuery UI 小工具主題的綜合指南 UI CSS framework"</a>, and <a href="http://jqueryui.com/docs/Theming/Themeroller" target="_blank" title="ThemeRoller application">"ThemeRoller application"</a>.
</p>
<p>
<a href="http://jqueryui.com/themeroller/" target="_blank" title="Visit ThemeRoller">Visit ThemeRoller!</a>
</p>
</div>
<!-- End Tabs Section #3 -->
</div>
<!-- End Tabs Area -->
</div>
<!-- End Tabs Container -->
<!-- Begin 自訂 jQuery UI 小工具主題的綜合指南 Container -->
<div class="content_container_2">
<h2>自訂 jQuery UI 小工具主題的綜合指南</h2>
<!-- Begin 自訂 jQuery UI 小工具主題的綜合指南 -->
<div id="accordion">
<!-- Begin Panel #1 -->
<h3><a href="#section1">自訂 jQuery UI 小工具主題的綜合指南</a></h3>
<div>
<!-- Begin Content Container Div -->
<div class="content_container_main">
<!-- Left Content Div -->
<div class="content_1">
<img src="images/accordion_1.png" style="max-width:90%" style="max-width:90%" alt="自訂 jQuery UI 小工具主題的綜合指南" />
<p>
Default 自訂 jQuery UI 小工具主題的綜合指南
</p>
<img src="images/accordion_2.png" style="max-width:90%" style="max-width:90%" alt="自訂 jQuery UI 小工具主題的綜合指南" />
<p>
自訂 jQuery UI 小工具主題的綜合指南 with Icons
</p>
</div>
<!-- Right Content Div -->
<div class="content_2">
<h2>自訂 jQuery UI 小工具主題的綜合指南</h2>
<p>
An <a href="http://jqueryui.com/demos/accordion/" target="_blank" title="自訂 jQuery UI 小工具主題的綜合指南">自訂 jQuery UI 小工具主題的綜合指南</a> doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an 自訂 jQuery UI 小工具主題的綜合指南.
</p>
<p>
The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled.
</p>
<p>
If you want 自訂 jQuery UI 小工具主題的綜合指南 sections to be collapsible, add "collapsible: true" to the JavaScript code.
</p>
<p>
To set the 自訂 jQuery UI 小工具主題的綜合指南 so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code.
</p>
<p>
<a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Learn More">Learn More</a>
</p>
</div>
</div>
<!-- End Content Container Div -->
</div>
<!-- End Panel #1 -->
<!-- Panel #2 -->
<h3><a href="#section2">Tabs</a></h3>
<div>
<!-- Begin Content Container Div -->
<div class="content_container_main">
<!-- Left Content Div -->
<div class="content_1">
<img src="images/tabs_1.png" style="max-width:90%" style="max-width:90%" alt="Tabs" />
<p>
Default Tabs
</p>
<img src="images/tabs_2.png" style="max-width:90%" style="max-width:90%" alt="Tabs" />
<p>
Tabs Below Content
</p>
<img src="images/tabs_3.png" style="max-width:90%" style="max-width:90%" alt="Tabs" />
<p>
Content via Ajax
</p>
</div>
<!-- Right Content Div -->
<div class="content_2">
<h2>Tabs</h2>
<p>
<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Tabs">Tabs</a> break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead.
</p>
<p>
If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code.
</p>
<p>
If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code.
</p>
<p>
Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance.
</p>
<p>
<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Learn More">Learn More</a>
</p>
</div>
</div>
<!-- End Content Container Div -->
</div>
<!-- End Panel #2 -->
<!-- Panel #3 -->
<h3><a href="#section3">Datepicker</a></h3>
<div>
<!-- Begin Content Container Div -->
<div class="content_container_main">
<!-- Left Content Div -->
<div class="content_1">
<p class="left_col_1">
<img src="images/datepicker_1.png" style="max-width:90%" style="max-width:90%" alt="Datepicker" />
<br />
Displayed Inline
</p>
<p class="left_col_2">
<img src="images/datepicker_2.png" style="max-width:90%" style="max-width:90%" alt="Datepicker" />
<br />
Icon Trigger
</p>
<p class="left_col_3">
<img src="images/datepicker_3.png" style="max-width:90%" style="max-width:90%" alt="Datepicker" />
<br />
With Button Bar
</p>
<p class="left_col_4">
<img src="images/datepicker_4.png" style="max-width:90%" style="max-width:90%" alt="Datepicker" />
<br />
Month & Year Menus
</p>
</div>
<!-- Right Content Div -->
<div class="content_2">
<h2>Datepicker</h2>
<p>
<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Datepicker">Datepicker</a> is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function.
</p>
<p>
To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field.
</p>
<p>
You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months.
</p>
<p>
The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more.
</p>
<p>
<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Learn More">Learn More</a>
</p>
</div>
</div>
<!-- End Content Container Div -->
</div>
<!-- End Panel #3 -->
<!-- Panel #4 -->
<h3><a href="#section4">Dialog</a></h3>
<div>
<!-- Begin Content Container Div -->
<div class="content_container_main">
<!-- Left Content Div -->
<div class="content_1">
<img src="images/dialog_1.png" style="max-width:90%" style="max-width:90%" alt="Dialog" />
<p>
Basic Modal Dialog
</p>
<img src="images/dialog_2.png" style="max-width:90%" style="max-width:90%" alt="Dialog" />
<p>
Modal Message
</p>
</div>
<!-- Right Content Div -->
<div class="content_2">
<h2>Dialog</h2>
<p>
A <a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Dialog">Dialog</a> is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon.
</p>
<p>
A scrollbar will automatically appear if the content length exceeds the maximum height.
</p>
<p>
The 自訂 jQuery UI 小工具主題的綜合指南 UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for any effects you would like to use.
</p>
<p>
You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application.
</p>
<p>
<a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Learn More">Learn More</a>
</p>
</div>
</div>
<!-- End Content Container Div -->
</div>
<!-- End Panel #4 -->
</div>
<!-- End 自訂 jQuery UI 小工具主題的綜合指南 -->
</div>
<!-- End 自訂 jQuery UI 小工具主題的綜合指南 Container -->
<!-- Begin Buttons Container -->
<div class="content_container_3">
<h2>Button</h2>
<div class="demo">
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>
<button>Button with text only</button>
</div>
</div>
<!-- End Buttons Container -->
登入後複製
CSS（样式.css）
将以下 CSS 代码添加到 style.css：
.content_container_3 {
width: 950px;
margin: 50px 0px 20px 20px;
}
