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

标签： jquery tools web | 发表时间：2012-05-21 09:02 | 作者：梦想天空（山边小溪）
出处：http://www.cnblogs.com/

基本介绍

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 库

编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接

相关 [jquery tools web] 推荐：

the-book-of-secret-knowledge: A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.

- -
If you find something which doesn't make sense, or something doesn't seem right, please make a pull request and please add valid and well-reasoned explanations about your changes or comments..

Web开发者必备的20款超赞jQuery插件

- Frank Cai - CSDN博客推荐文章
 jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件. jQuery插件不仅能够增强网站的可用性，有效地改善用户体验，还可以大大减少开发时间. 现在的jQuery插件很多，可以根据您的项目需要来选择. 这里为您介绍20款非常不错的插件. Lettering.js是一个轻量经的、易于使用的jQuery插件，可创造出极具个性的网页排版，是2010年最佳jQuery插件之一.

50个WEB开发人员需要的jQuery插件

- - Jackchen Design 1984
jQuery插件是很多前端开发人员和网页设计师都会设计的东西. 这些插件大大的缩短了工作时间，调高了设计开发人员的效率. 精力的缩减对于开发人员来说是绝对需要的. 那么除了需要你有好的用户体验的经验还要学会去搜集优秀的插件以备未来使用. 今天我们要分享出来的就是一些非常优秀的jQuery插件. 去了解这些插件带来的体验和便捷.

18 Command Line Tools to Monitor Linux Performance(转)

- - Linux - 操作系统 - ITeye博客
This list of commands shown here are very enough for you to pick the one that is suitable for your monitoring scenario.. Top command is a performance monitoring program which is used frequently by many system administrators to monitor Linux performance and it is available under many.

Cookiel劫持测试工具 – Cookie Injecting Tools

- - FreeBuf.COM
‍‍Cookie Injecting Tools 是一款简单的开源cookie利用工具，是Chrome浏览器上开发的一个扩展插件，能够灵活地进行SQL注入测试，编辑以及添加删除COOKIE，界面简洁，易于使用‍‍. 可以直接下载打包好的CRX文件,源码就包含其中，当然也可以直接下载源码运行‍‍. ‍‍‍‍ 有两种方式‍‍.

【茶包射手日記】使用IE Dev Tools追查Javascript效能問題

- - 黑暗執行緒
同事回報某個網頁出現"在IE8下，使用jquery.blockUI遮蔽某個div後，輸入時，每打一個字都要等1-2秒字元才會顯示"的問題. 開啟VM使用IE8可重現問題；而同樣網頁在IE9下則運作正常. 針對此一IE下的JavaScript茶包，決定交由 JavaScript效能茶包一哥--IE Dev Tools Profiler工具進行獵殺!.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.