文章目錄
- Tabs（選項卡）
- Tooltip（資訊提示）
- Overlay（遮罩、彈窗）
- Scrollable（資訊滾動）
- Validator（表單驗證）
- Rangeinput（範圍選取）
- Dateinput（日期選擇）
- Expose（突出重點）
- Flashembed（嵌入Flash）
- Combinations（整合功能）
基本介紹
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（選項卡）
- 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 tabs
- Customizing the accordion effect
- Horizontal accordion using the tabs
- Multiple tabs and accordion instances
- Handling browsers back button
- Loading tab contents with ajax
- AJAXed tabs with history support
- Slideshow plugin for the tabs
Tooltip（資訊提示）
- 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
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 the same page
- Creating a customized overlay effect
Scrollable（資訊滾動）
- Minimal setup for scrollable
- A vertical scrollable
- A simple scrollable image gallery
- Gallery with multiple scrollables
- A scrollable registration wizard
- Scrollable plugins in action
- Browser back button navigation
- jQuery tools home page setup
- A complete navigational system
- Add and remove items from scrollable
- Customizing the scrolling animation
Form Tools
Form Tools 部分包括Validator、Rangeinput和Dateinput三個功能模組，各功能模組的Demo如下：
Validator（表單驗證）
- Minimal setup for validator
- Custom input types and attributes
- Server & client-side validation
- Error Summary
- Validator events in action
- Localizing the validator
Rangeinput（範圍選取）
- Minimal setup for rangeinput
- A couple of vertical ranges
- Multiple small ranges
- A custom scrollbar for a DIV
Dateinput（日期選擇）
- Minimal setup for dateinput
- A large skin for Dateinput
- Customizing Dateinput behavior
- Prompting for start and end dates
- Calendar that is always available
- Localizing the Dateinput (french)
Tools Box
Tools Box 部分包括Expose、Flashembed和Combinations三個功能模組，各功能模組的Demo如下：
Expose（突出重點）
- Minimal setup for expose
- Styling the mask
- Exposing a form
- Exposing videos with a custom mask
Flashembed（嵌入Flash）
- Basics of Flash embedding
- Flashembed and jQuery
- Loading flash on a mouse click
- Placing HTML on top of a flash object
- Handling old flash versions
- Flashembed and Flowplayer
Combinations（整合功能）
- HTML5 form inside an overlay
- An artist’s portfolio
- Speeding up the portfolio
您可能還喜歡
- 基於 HTML5 Canvas 的圖片放大鏡
- RoboVoice.com：讓你的網頁會說話
- 8個超棒的免費高品質表徵圖搜尋引擎
- 分享5個有趣的 JavaScript 程式碼片段
- 推薦一個很棒的免費自助建站工具
本文連結：jQuery Tools：Web開發必備的 jQuery UI 庫
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
