jQuery入门(19) jQuery UI概述

前面介绍了jQuery的基本用法,jQuery UI 是一套 JavaScript 函式库,提供抽象化、可自订主题 的 GUI 控制项与动画效果。基于 jQuery JavaScript 函式库,可用来建构互动式的Web应用。

它的基本功能有:

互动

拖曳(Draggable) – 让元素可以用滑鼠拖曳。

拖放 (Droppable) – 让控制项可以接受其他拖曳进来的元素。

调整大小(Resizable) – 让元素可 以调整大小。

选取(Selectable) – 提供进阶的大量元素选择功能。

排序(Sortable) – 让 列表可以更容易排序。

控制项

jQuery UI 的所有控制项都能自订主题样式。

手 风琴式选单(Accordion) – 如手风琴般可伸缩的控制项。

自动完成(Autocomplete) – 根据使 用者的输入来自动完成文字栏。

按钮(Button) – 增强按钮外观,将单选与复选控制项转变成按 钮型式。

日期选择器(Datepicker) – 进阶的日期选择工具。

对话框(Dialog) –在页面最 上层显示对话框。

选单(Menu) – 显示多阶层式的选单。

进度条(Progressbar) – 动态与 静态的进度指示条。

滑动条(Slider) – 完全可以自订的滑动条与各种功能。

微调选择器 (Spinner) – 上下控制的数字微调输入栏。

页签(Tabs) – 页签切换控制项,可以内嵌或动态 载入内容。

工具提示(Tooltip) – 弹出式提示框。

效果

颜色动画(Color Animation) – 产生颜色转变的动画效果。

切换 Class、新增 Class、移除 Class、开关 Class – 让页面上元素样式转变时有动画效果。

效果(Effects) – 各种效果(显示、下拉、爆炸、淡 入等等)。

切换(Toggle) – 切换效果开关。

隐藏、显示 – 使用上述的效果。

工具

位置(Position) – 根据另一个元素来设定目标元素的位置(对齐)。

下图为使用 jQuery UI一些UI组件

时间: 2025-01-20 14:33:39

jQuery入门(19) jQuery UI概述的相关文章

jQuery入门(20) jQuery UI基本工作过程

本篇介绍JQuery UI组件的基本工作过程,以进程条(Progressbar)为例介绍JQuery UI组件工作的 基本过程. 初始化 大部分JQuery Ui组件都可以保持其状态,因此为了能够跟踪UI组件的状 态,jQuery UI组件也有一个生命周期,这个生命周期从初始化开始,为了初始化一个UI组件,一般在 某个HTML元素调用UI组件(插件)方法.,比如 $( "#elem" ).progressbar(); 这 个方法初始化id=elem的元素,因为我们调用progressb

jQuery入门(21) jQuery UI示例

上篇介绍了使用jQuery UI基本工作过程,后面就逐个介绍jQuery UI库内置的UI组件,支持的拖放 ,动画效果等,如果你之前看过Yii Framework教程 ,PHP Yii Framework封装了jQuery UI组件,有兴 趣的可以看一看. 本教程面的示例基本翻译自jQuery UI 英 文网站,部分例子可能有些修改,测试环境依然是Visual Studio IDE (2012). jQuery UI  也支持多种显示主题.

jQuery入门教程:jQuery对象的获取

文章简介:jQuery进军中的战友们,通过前面两章的学习,大家肯定对jQuery中的"$"函数不明不白,没关系,只要大家挺得住,咱们定能得到最终胜利.言归正传,通过下面几章的学习,一定能明白"$"函数,trust me !现在大家想一下在CSS中有哪几种选择器? jQuery进军中的战友们,通过前面两章的学习,大家肯定对jQuery中的"$"函数不明不白,没关系,只要大家挺得住,咱们定能得到最终胜利.言归正传,通过下面几章的学习,一定能明白&qu

jquery入门教程

jQuery入门(1) 概述 jQuery入门(2) 基本语法 jQuery入门(3) Selectors jQuery入门(4) Events jQuery入门(5) 显示/隐藏内容 jQuery入门(6) 淡入淡出效果 jQuery入门(7) 滑动效果 jQuery入门(8) 动画效果 jQuery入门(9) 终止动画 jQuery入门(10) 回调函数 jQuery入门(11) 方法链 jQuery入门(12) HTML Get jQuery入门(13) HTML Set jQuery入门

jQuery入门(1) 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自 Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计 使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以 及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互 与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使

JQuery入门基础小实例(1)_jquery

先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

jQuery入门[1]-构造函数

体积小(v1.2.315kb) 丰富的DOM选择器(CSS1-3+XPath) 跨浏览器(IE6,FF,Safari,Opera) 链式代码 强大的事件.样式支持 强大的AJAX功能 易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个 jQuery对

jQuery入门(13) HTML Set

上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值. text() – 设置或取得指 定元素的文本内容. html() – 设置或取得指定元素的内容(包括HTML标记) val() – 设置或 取得表单某个输入域的值. 比如下面代码就是使用上面三种方法给HTML元素或Form赋值 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("

jQuery入门(12) HTML Get

jQuery库包含了很多用来改变和操作HTML元素及其属性的方法. 其中一个非常重要的部分就是 jQuery可以用来操作DOM. 本篇介绍使用jQuery来取得DOM节点元素的值或属性. 其中三个简单而 有用的方法如下: text() – 设置或取得指定元素的文本内容. html() – 设置或取得指定 元素的内容(包括HTML标记) val() – 设置或取得表单某个输入域的值. 例如,下面代码 使用html()和text()方法取得HTML元素的内容: $("#btn1").cli