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

浏览数：35 / 时间：2015年06月09日

基本介绍

　　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

 

jQuery Tools：Web开发必备的 jQuery UI 库,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class 代码 style html int des class 代码 style html int

相关文章

随机文章

您可能还喜欢

您可能还喜欢