基本介绍

  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 库的更多相关文章

  1. Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库

    SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...

  2. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  3. modern.IE – Web 开发必备的 IE 浏览器测试工具

    modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容.m ...

  4. Normalize.css – 现代 Web 开发必备的 CSS resets

    Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...

  5. 移动 Web 开发必备!时尚的 Off Canvas 导航

    这里向大家分享一组创新的 Off Canvas 导航效果.Off Canvas 导航在一些移动应用程序中被广泛使用.当你点击汉堡按钮(一般是三条横线组成)时,在左侧或者右侧拉出一个菜单,这样可以充分利 ...

  6. 第十六章:Python の Web开发基础(三) jQuery与Ajax

    本課主題 jQuery 介绍 Ajax 介绍 jQuery 介绍 选择器 jQuery 的选择器分不同的种类,主要目的是用来查找目标的 HTML 标签,方便对目标标签进行操作,比如找到 <li& ...

  7. Web开发必备资源汇总[转]

    导读:原文来自< Best “must know” open sources to build the new Web>,译文由酷壳网陈皓整理编译< 开源中最好的Web开发的资源 & ...

  8. java web开发必备知识

    从各种招聘网站的要求上筛选出了一些java开发的一些基本的要求,对照自身看看有哪些缺陷. java基础 既然是java web开发,java SE肯定要学好了. 多线程,IO,集合等,对队列,缓存,消 ...

  9. 让人一用钟情的VS插件系列之一——Web Essentials(Web开发必备利器)

    返回VS插件总目录 本篇目录 初识Web Essentials 看国外大牛如何评价Web Essentials Web Essentials下载与安装 Web Essentials涉及到了哪些内容 初 ...

随机推荐

  1. hdoj 2094 产生冠军

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. 使用ViewPager实现三个fragment切换

    新建一个android项目 先展示效果吧 首先看myfragmentPagerAdater这个类的代码 package com.example.viewpager; import java.util. ...

  3. DataGridView 选中行 分类: DataGridView 2015-01-22 09:07 51人阅读 评论(0) 收藏

    说明: (1)命名 DataGridView 名称:dgvStockFirst 行索引:recordIndex (2)设置DataGridView属性: SelectionMode=FullRowSe ...

  4. (二)windows下安装PHPCMS V9

    一.准备工作 搭建环境 :参考:Windows下搭建PHP开发环境及相关注意事项 PHPCMS V9 :下载适合自己 PHPCMS V9 版本到本地或服务器,下载地址:http://www.phpcm ...

  5. Android之打开闪光灯关键代码

    在AndroidManifest中注册相应的权限: <uses-permission android:name="android.permission.FLASHLIGHT" ...

  6. ajax jsonp跨域处理问题

    客户端 html $.ajax({ type : "get", async:false, dataType : "jsonp", jsonp: "js ...

  7. UVa 10400 - Game Show Math 游戏中的数学 dfs+判重

    题意:给出一些数字和一个目标数字,要求你在数字间添加+-*/,让表达式能达到目标数字,运算符号的优先级都是一样的. 由于数据量很大,本来想用map<string>判重的,结果还是超时了,然 ...

  8. [AngularJS + Webpack] Uglifying your JavaScript

    Angular requires some careful consideration when uglifying your code because of how angular's depend ...

  9. [转] Mac 下 PostgreSQL 的安装与使用

    在 mac 下,可以利用 homebrew 直接安装 PostgreSQL: 1 brew install postgresql -v 稍等片刻,PostgreSQL 就安装完成.接下来就是初始数据库 ...

  10. Fragment之我的解决方案:Fragmentation

    Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使用姿势3.Fragment之我的解决方案:Fragmentation 如果你 ...