jQuery Tools：Web开发必备的 jQuery UI 库

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

基本介绍

　　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（选项卡）

 

​​​​

 

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

　　Tooltip（信息提示）

 

​​​​

  

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

　　Overlay（遮罩、弹窗）

 

​​​​

 

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

　　Scrollable（信息滚动）

 

​​​​

 

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

Form Tools

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

 

 

　　Validator（表单验证）

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

　　Rangeinput（范围选择）

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

　　Dateinput（日期选择）

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

Tools Box

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

 

 

　　Expose（突出重点）

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

　　Flashembed（嵌入Flash）

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

　　Combinations（整合功能）

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

 

​

作者：​​山边小溪​​

欢迎任何形式的转载，但请务必注明出处。