网页开发必备的jQuery UI库:Tabs、Tooltip、Overlay、Scrollable...
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 部分包括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(突出重点)
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