jQuery Tools——不可錯過的jQuery UI庫

JQueryTools是 一組基于JQuery構建的用戶界面常用組件的集合。通過使用jQueryTools，網站前端開發無疑會 變得更加高效。值得注意的是，jQueryTools的gzip壓縮版本僅有5.8k，如此輕量級而且功能實用的UI組件絕對值得我們關注。下面是官方主頁對它的一個描述：
JqueryTools包含如今網站六個最有用的JavaScript工具。它的一個優點是所有這些工具可 以一起使用、擴展、配置和樣式化。
最終，通過它你可以制作出眾多不同的網站部件，或用個人的方式創造新的應用。
下面是JqueryUI包含的工具列表：

1. 選項卡功能(Tabs)
2. 提示工具條功能(ToolTips)
3. 信 息滾動功能(Scrollable)
4. 遮罩效果(overlay)
5. 突出效果(expose)
6. Flash 嵌入
7. 表單驗證（Validator）
8. 范圍選取（Rangeinput）
9. 日期選擇 （Dateinput）

以下分別是具體功能列表：

1、選項卡(Tabs)

效果圖

• Minimal setup for Tabs
• Naming the tabs
• 4 different skins with CSS
• Using mouseover to switch tabs
• Making Wizards with the Tabs
• Making Accordions with the Tabs
• Customizing the Accordion effect
• Horizontal Accordion using the Tabs
• Multiple Tabs and Accordion instances
• Handling browsers back button
• Loading tab contents with AJAX
• AJAX:ed tabs with History support
• Slideshow plugin for the Tabs

2、提示工具條(ToolTips)

效果圖

• Basics of using the tooltip
• Using any HTML inside the tooltip
• Imitating browsers default tooltip
• Using tooltips in form fields
• Using tooltips in tables or lists
• Custom tooltip effect
• Dynamic positioning of the tooltip

3、遮罩效果(overlay)

效果圖

• Minimal setup for overlay
• The Apple effect for overlay
• Creating modal dialogs with overlay
• Opening overlays programmatically
• Overlays with different styles
• Loading external pages into overlay
• Multiple overlays on a same page
• Creating a customized Overlay effect

4、滾動效果(Scrollable)

效果圖

• Minimal setup for scrollable
• A vertical scrollable
• A simple scrollable image gallery
• Another gallery with many scrollables
• A scrollable registration wizard
• Scrollable plugins in action
• Navigation with browser’s back button
• jQuery Tools home page setup
• A complete scrollable navigational system
• Add and remove items from scrollable
• Customizing the scrolling animation

5、突出效果(expose)

效果圖

• Minimal setup for expose
• Styling the mask with a background image
• Exposing a form
• Exposing videos with a custom mask

6、Flash嵌入

效果圖

• Basics of Flash embedding
• Flashembed and jQuery
• Loading Flash on mouse click
• Placing HTML on top of a Flash object
• Handling old Flash versions
• Flashembed and Flowplayer

7、表單驗證（Validator）

效果圖

• Minimal setup for Validator
• Custom input types and attributes
• Combined server and client-side validation
• Displaying all errors inside a single DIV
• Validator events in action
• Localizing the Validator (finnish)

8、范圍選取（Rangeinput）

效果圖

• Minimal setup for rangeinput
• A couple of vertical ranges
• Multiple small ranges
• A custom scrollbar for a DIV

9、日期選擇（Dateinput）

效果圖

• Minimal setup for Dateinput
• A large skin for Dateinput
• Customizing Dateinput behaviour
• Prompting for start and end dates
• Calendar that is always visible
• Localizing the Dateinput (french)

10、 綜合運用（Combinations）

效果圖

• HTML5 form inside an overlay
• An artist’s portfolio
• Speeding up the portfolio