基本介绍

　　jQuery Tools 是基于 jQuery 开发的网站界面库，包含网站最常用的Tabs（选项卡）、Tooltip（信息提示）、Overlay（遮罩、弹窗）、Scrollable（滚动控制）、Form Validator（表单验证）、Rangeinput（范围选择）、Dateinput（日期选择）等众多功能。jQuery Tools 提供了高自定义的API接口，能够帮助开发者非常容易的实现所需要的功能，带给用户更佳的使用体验。

　　相比 jQuery UI，jQuery Tools 提供了作为网站应用更需要使用的功能，jQuery Tools 提供的功能分为三部分，分别是 UI Tools，Form Tools 和 Tools Box，下面会对每个功能模块分别作介绍，另外 jQuery Tools 要比 jQuery UI 的界面更精美，可定制性更好。除此之外，jQuery Tools 核心代码使用 GZIP 压缩后只有3.9KB，及时包括搜有的扩展功能也才14KB，要比 jQuery UI 轻量很多。

UI Tools

　　UI Tools 部分包括Tabs、Tooltip、Overlay和Scrollable四个功能模块，各功能模块的Demo如下：

　　Tabs（选项卡）

1. Minimal setup for tabs
2. Naming the tabs
3. 4 different skins with CSS
4. Using mouseover to switch tabs
5. Making wizards with the tabs
6. Making accordions with tabs
7. Customizing the accordion effect
8. Horizontal accordion using the tabs
9. Multiple tabs and accordion instances
10. Handling browsers back button
11. Loading tab contents with ajax
12. AJAXed tabs with history support
13. Slideshow plugin for the tabs

　　Tooltip（信息提示）

1. Basics of using the tooltip
2. Using any HTML inside the tooltip
3. Imitating browsers default tooltip
4. Using tooltips in form fields
5. Using tooltips in tables or lists
6. Custom tooltip effect
7. Dynamic positioning of the tooltip

　　Overlay（遮罩、弹窗）

1. Minimal setup for overlay
2. The apple effect for overlay
3. Creating modal dialogs with overlay
4. Opening overlays programmatically
5. Overlays with different styles
6. Loading external pages into overlay
7. Multiple overlays on the same page
8. Creating a customized overlay effect

　　Scrollable（信息滚动）

1. Minimal setup for scrollable
2. A vertical scrollable
3. A simple scrollable p_w_picpath gallery
4. Gallery with multiple scrollables
5. A scrollable registration wizard
6. Scrollable plugins in action
7. Browser back button navigation
8. jQuery tools home page setup
9. A complete navigational system
10. Add and remove items from scrollable
11. Customizing the scrolling animation

Form Tools

　　Form Tools 部分包括Validator、Rangeinput和Dateinput三个功能模块，各功能模块的Demo如下：

　　Validator（表单验证）

1. Minimal setup for validator
2. Custom input types and attributes
3. Server & client-side validation
4. Error Summary
5. Validator events in action
6. Localizing the validator

　　Rangeinput（范围选择）

1. Minimal setup for rangeinput
2. A couple of vertical ranges
3. Multiple small ranges
4. A custom scrollbar for a DIV

　　Dateinput（日期选择）

1. Minimal setup for dateinput
2. A large skin for Dateinput
3. Customizing Dateinput behavior
4. Prompting for start and end dates
5. Calendar that is always available
6. Localizing the Dateinput (french)

Tools Box

　　Tools Box 部分包括Expose、Flashembed和Combinations三个功能模块，各功能模块的Demo如下：

　　Expose（突出重点）

1. Minimal setup for expose
2. Styling the mask
3. Exposing a form
4. Exposing videos with a custom mask

　　Flashembed（嵌入Flash）

1. Basics of Flash embedding
2. Flashembed and jQuery
3. Loading flash on a mouse click
4. Placing HTML on top of a flash object
5. Handling old flash versions
6. Flashembed and Flowplayer

　　Combinations（整合功能）

1. HTML5 form inside an overlay
2. An artist’s portfolio
3. Speeding up the portfolio

您可能还喜欢

• 基于 HTML5 Canvas 的图片放大镜
• RoboVoice.com：让你的网页会说话
• 8个超棒的免费高质量图标搜索引擎
• 分享5个有趣的 JavaScript 代码片段
• 推荐一个很棒的免费自助建站工具

本文链接：jQuery Tools：Web开发必备的 jQuery UI 库

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源