下载APP 随时随地学编程
返回 首页

jQuery UI教程

开始阅读

手册说明:

认识jQuery UI

jQuery UI是以 jQuery为基础的开源JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。



jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件。


jQuery UI 与 jquery 的主要区别是:

(1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。

(2) jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。


教程结构概述:

本教程共由5个章节构成,详细讲述了jQuery UI的基础使用方法并附带了大量可在线试运行的实例辅助您的学习,让您轻松掌握jQuery UI。


本教程包含:

1、jQuery UI入门

2、jQuery UI主题

3、jQuery UI部件库

4、jQuery UI参考手册


jQuery UI的特性及学习前的准备:

jQuery UI 主要分为3个部分:交互、微件和效果库。

交互交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortable等。

微件主要是一些界面的扩展,包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,新版本的UI将包含更多的微件。

效果库用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。


在您开始学习AngularJS之前,您应该对以下知识有基本的了解:

HTML 教程

CSS 教程

JavaScript 教程

本教程全面介绍了jQuery UI如何改进HTML页面展示,内容包括jQuery UI的扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历、自动补全、拖放管理、选择元素、缩放、元素调序以及新的视觉特效等。本教程讲述了jQuery UI的所有功能。适合Web开发人员及设计人员阅读。无论是jQuery UI的初学者还是有一定经验的开发人员,本教程都是极好的技术参考学习资料。


jQuery UI的优缺点:

优点:

1、简单易用,继承 jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。

2、轻便快捷,组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。

3、标准先进,支持 WAI-ARIA,通过标准 XHTML 代码提供渐进增强,保证低端环境可访问性。

4、强力支持,Google 为发布代码提供 CDN 内容分发网络支持。


缺点:

1、代码不够健壮:缺乏全面的测试用例,部分组件 Bugs 较多,不能达到企业级产品开发要求。

2、构架规划不足:组件间 API 缺乏协调,缺乏配合使用帮助。

3、控件较少:相对于 Dojo、YUI、Ext JS 等成熟产品,可用控件较少,无法满足复杂界面功能要求。


相关网址:

1、jQuery UI 下载:请从 jQuery UI 网站上的 Download Builder(下载生成器) 页面下载 jQuery UI 的副本。

2、jQuery UI 官网:http://jqueryui.com/

3、jQuery UI 中文网:http://www.jqueryui.org.cn/


除了本教程,您还可以在w3cschool上学习:

HTML 教程

CSS 教程

《HTML 5 教程》







更新记录
  • jQuery UI教程
    10-19 09:44
  • jQuery UI教程
    10-19 09:25
    jQuery UI ThemeRoller
    08-27 09:51
    jQuery UI 如何使用部件库
    08-27 09:48
    jQuery UI ThemeRoller
    08-27 09:18
    jQuery UI 定制
    08-27 09:15
    jQuery UI 使用
    08-27 09:14
    jQuery UI 下载
    08-27 09:13
目录

jQuery UI 教程

jQuery UI 教程
jQuery UI 简介
jQuery UI 下载
jQuery UI 使用
jQuery UI 定制
jQuery UI 工作原理

jQuery UI 主题

jQuery UI 主题
jQuery UI ThemeRoller
jQuery UI CSS 框架 API
jQuery UI 设计主题

jQuery UI 部件库

jQuery UI 部件库
jQuery UI 通过部件库扩展小部件
jQuery UI 小部件方法调用
jQuery UI 为什么使用部件库
jQuery UI 如何使用部件库

jQuery UI 参考手册

jQuery UI API 文档
jQuery UI API 类别 – 特效
jQuery UI API 类别 – 特效核心
jQuery UI API 类别 – 交互
jQuery UI API 类别 – 方法重载
jQuery UI API 类别 – 方法
jQuery UI API 类别 – 选择器
jQuery UI API 类别 – 主题
jQuery UI API 类别 – UI 核心
jQuery UI API 类别 – 实用工具
jQuery UI API 类别 – 小部件

jQuery UI 实例

jQuery UI 实例
jQuery UI 实例 – 拖动(Draggable)
jQuery UI 实例 – 放置(Droppable)
jQuery UI 实例 – 缩放(Resizable)
jQuery UI 实例 – 选择(Selectable)
jQuery UI 实例 – 排序(Sortable)
jQuery UI 实例 – 折叠面板(Accordion)
jQuery UI 实例 – 自动完成(Autocomplete)
jQuery UI 实例 – 按钮(Button)
jQuery UI 实例 – 日期选择器(Datepicker)
jQuery UI 实例 – 对话框(Dialog)
jQuery UI 实例 – 菜单(Menu)
jQuery UI 实例 – 进度条(Progressbar)
jQuery UI 实例 – 滑块(Slider)
jQuery UI 实例 – 旋转器(Spinner)
jQuery UI 实例 – 标签页(Tabs)
jQuery UI 实例 – 工具提示框(Tooltip)
jQuery UI 实例 – 特效(Effect)
jQuery UI 实例 – 显示(Show)
jQuery UI 实例 – 隐藏(Hide)
jQuery UI 实例 – 切换(Toggle)
jQuery UI 实例 – 添加 Class(Add Class)
jQuery UI 实例 – 移除 Class(Remove Class)
jQuery UI 实例 – 切换 Class(Toggle Class)
jQuery UI 实例 – 转换 Class(Switch Class)
jQuery UI 实例 – 颜色动画(Color Animation)
jQuery UI 实例 – 定位(Position)
jQuery UI 实例 – 部件库(Widget Factory)

关闭