海水正藍(lán)

基本介紹

　　jQuery Tools 是基于 jQuery 開(kāi)發(fā)的網(wǎng)站界面庫(kù)，包含網(wǎng)站最常用的Tabs（選項(xiàng)卡）、Tooltip（信息提示）、Overlay（遮罩、彈窗）、Scrollable（滾動(dòng)控 制）、Form Validator（表單驗(yàn)證）、Rangeinput（范圍選擇）、Dateinput（日期選擇）等眾多功能。jQuery Tools 提供了高自定義的API接口，能夠幫助開(kāi)發(fā)者非常容易的實(shí)現(xiàn)所需要的功能，帶給用戶(hù)更佳的使用體驗(yàn)。

　　相比 jQuery UI，jQuery Tools 提供了作為網(wǎng)站應(yīng)用更需要使用的功能，jQuery Tools 提供的功能分為三部分，分別是 UI Tools，F(xiàn)orm Tools 和 Tools Box，下面會(huì)對(duì)每個(gè)功能模塊分別作介紹，另外 jQuery Tools 要比 jQuery UI 的界面更精美，可定制性更好。除此之外，jQuery Tools 核心代碼使用 GZIP 壓縮后只有3.9KB，及時(shí)包括搜有的擴(kuò)展功能也才14KB，要比 jQuery UI 輕量很多。

UI Tools

　　UI Tools 部分包括Tabs、Tooltip、Overlay和Scrollable四個(gè)功能模塊，各功能模塊的Demo如下：

　　Tabs（選項(xiàng)卡）

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（信息滾動(dòng)）

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三個(gè)功能模塊，各功能模塊的Demo如下：

　　Validator（表單驗(yàn)證）

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三個(gè)功能模塊，各功能模塊的Demo如下：

　　Expose（突出重點(diǎn)）

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：讓你的網(wǎng)頁(yè)會(huì)說(shuō)話(huà)
• 8個(gè)超棒的免費(fèi)高質(zhì)量圖標(biāo)搜索引擎
• 分享5個(gè)有趣的 JavaScript 代碼片段
• 推薦一個(gè)很棒的免費(fèi)自助建站工具

本文鏈接：jQuery Tools：Web開(kāi)發(fā)必備的 jQuery UI 庫(kù)

編譯來(lái)源：夢(mèng)想天空 ◆ 關(guān)注前端開(kāi)發(fā)技術(shù) ◆ 分享網(wǎng)頁(yè)設(shè)計(jì)資源