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（選項卡）

 

 

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 image 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 庫

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源