jQuery Tools——不可错过的jQuery UI库
by 疯狂小强
at 2010-11-17 09:59:31
original http://www.woiweb.net/flexible-ui-library-jquery-tools.html
JQueryTools是一组基于jquery构建的用户界面常用组件的集合。通过使用jQueryTools，网站前端开发无疑会变得更加高效。值得注意的是，jQueryTools的gzip压缩版本仅有5.8k，如此轻量级而且功能实用的UI组件绝对值得我们关注。下面是官方主页对它的一个描述：
JqueryTools包含如今网站六个最有用的javascript工具。它的一个优点是所有这些工具可以一起使用、扩展、配置和样式化。
最终，通过它你可以制作出众多不同的网站部件，或用个人的方式创造新的应用。
下面是JqueryUI包含的工具列表：
- 选项卡功能(Tabs)
- 提示工具条功能(ToolTips)
- 信息滚动功能(Scrollable)
- 遮罩效果(overlay)
- 突出效果(expose)
- flash嵌入
- 表单验证（Validator）
- 范围选取（Rangeinput）
- 日期选择（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）
效果图