引路蜂移动软件

JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为Toolbar显示，比如：12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/jquery-ui.cs

支持收缩和展开缺省情况下，标签页是展开的，可以通过设置collapsible为true使得标签页支持收缩和展开。1script>2    $(function () {3        $("#tabs").tabs({4            collapsible: true5        });6    });7script>Ajax支持jQuery 的标签页也支持通过Ajax方法来加载页

Tab  显示多个标签页，每个标签含有一个标签头和一个Panel（显示标签的内容）。基本用法首先使用HTML定义用来作为Tab，一般使用列表（ul ,li) 来定义标签页的标题，每个标题使用href 链接到每个页面的内容页，比如下例定义了三个标签页：1div id="tabs">2    ul>3        li>a href="#tabs-1">Nunc tincidunta>li>4

Spinner 主要用来输入各种格式的数字，可以使用鼠标滚轮，键盘方向键来修改输入值，也支持直接键入数字。支持本地化的输入金额和时间。基本用法下面代码显示了Spinner的基本用法，设置和取得Spinner的当前值。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link

前面的slider 例子Slider都是水平显示的，Slider也可以显示成垂直的，这可以通过配置orientation ，将其值设为“vertical”。基本用法12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="th

jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。基本用法12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/j

前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。在使用进度条时，如果可以预知进度的大小，可以设置Max大小，如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。基本用法12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demo

jQuery Menu 组件可以应用到任何具有父/子关系的元素，就其变为菜单，但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素，可以通过menus 来配置。下例使用缺省的　ui和 li 菜单支持选择事件select，因此可以为菜单添加事件处理。基本用法12html lang="en">3head>4    meta charset="utf-8" />5    title>jQue

本篇使用Dialog 构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic

模式对话框如想对话框显示为模式的，可以通过配置modal: true来设置。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7    script

jQuery Dialog组件用来显示对话框，模式或非模式的。基本用法12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7    script sr

设置可以选择的日期范围有时希望用户在给定的日期内选择，比如预约会议的时间，只能在当天开始的一个月带10天以内。这时可以通过配置minDate和maxDate 来设置，如果minDate或maxDate 没有配置，表示没有最小日期或最大日期的限制。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demos

DatePicker支持使用另外的按钮控制日期选择界面显示，可以通过自定义的图标来显示这个按钮。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7

格式化日期可以通过日期格式重新定义Datepicker显示日期时的格式。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7    script s

显示月份和年份选择下拉框changeMonth 和changeYear 选择可以打开和关闭月份和年份下拉选择框。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="themes/trontastic/jquery-ui.

jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。基本用法如下：12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href

本例为使用jQuery的一个实用的例子，显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标（比如ui-icon-seek-end等）。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet" href="t

jQuery Button 组件可以增强表单（Form)中的Buttons，Inputs和Anchor元素，使其具有按钮显示风格，能够正确对鼠标滑动做出反应。基本用法下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。12html lang="en">3head>4    meta charset="utf-8" />5    title>j

AutoComplete在用户输入时，可以根据用户输入给出提示。其数据源可以来自本地，也可以使用远程数据源，AutoComplete 的DataSource可以使用一个Function，本篇中的Function，我们使用JSONP查询。　当数据源为Function时，其函数定义为：Function( Object request, Function response( Object data））其

如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外，还需要添加一些事件处理。12html lang="en">3head>4    meta charset="utf-8" />5    title>jQuery UI Demostitle>6    link rel="stylesheet"

AutoComplete 在获取焦点后，随着用户键入的内容，可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。这可以用作之前输入过的内容也可以用作自动填充相关内容，比如根据城市名，自动填充邮编等。你可以使用本地数据源或是远程数据源，本地数据一般使用小数据集合，比如包含50条记录的通讯录，远程数据源一般为保护大量记录的数据库。基本用法本例为使用AutoComplete的基本用法，通过

本篇介绍Accordion组件（类似手风琴可以折叠的UI组件）。基本用法jQuery Accordion UI组件可以把一个包含有具有Header (标题头）和Content（内容）对的容器转变成Accordion组件。比如如下一个Id=”accordion”Div HTML元素。1div id="accordion">2    h1>Section 1h1>3    div>4        p

上篇介绍了使用jQuery UI基本工作过程，后面就逐个介绍jQuery UI库内置的UI组件，支持的拖放，动画效果等，如果你之前看过Yii Framework教程 ，PHP Yii Framework封装了jQuery UI组件，有兴趣的可以看一看。Yii Framework 开发教程(29) Zii组件-Menu 示例Yii Framework 开发教程(30) Zii组件-ListView

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

前面介绍了jQuery的基本用法，jQuery UI 是一套 JavaScript 函式库，提供抽象化、可自订主题的 GUI 控制项与动画效果。基于 jQuery JavaScript 函式库，可用来建构互动式的Web应用。它的基本功能有：互动拖曳（Draggable） – 让元素可以用滑鼠拖曳。拖放（Droppable） – 让控制项可以接受其他拖曳进来的元素。调整大小（Resizable） –

jQuery 提供下面方法来控制HTML元素的大小：width()height()innerWidth()innerHeight()outerWidth()outerHeight()一般影响HTML元素 大小各部分的示意图如下所示： jQuery width()和height()方法width()用来设置或取得元素的宽度，height()设置和取得元素的高度。下面代码取得元素的高度和宽度。$("b

jQuery 的css()方法用来设置或读取HTML元素的css属性。读取元素的CSS语法语法如下：css(“propertyname“);比如下面代码取得第一个元素的背景颜色。$("p").css("background-color");使用下面的语法来设置HTML元素的CSS属性：css(“propertyname“,”value“);例如，下面代码为所有元素设置背景色为黄色。

jQuery支持方法用来操作HTML元素的CSS 属性 下面的方法为jQuery 提供的CSS操作方法：addClass() – 为指定的元素添加一个或多个CSS类。removeClass() – 为指定的元素删除一个或多个CSS类。toggleClass() – 为指定的元素在添加/删除CSS类之间切换。css() -设置或是取得CSS类型属性。下面的StyleSheet为后面例子使用的CSS风

jQuery使用下面两个方法来删除或是清空某个HTML元素。remove() – 删除指定的元素（包括其子元素）empty() – 清空指定元素的子元素例如： JQuery Demo $(document).ready(function () { $("button").click(function () {

使用jQuery可以方便的添加新的HTML元素。下面的方法用于添加HTML元素：append() – 在指定的元素的尾部添加一个新内容。prepend() -在指定的元素里前部添加新内容。after() – 在指定元素后添加新内容before() -在指定元素的前面添加新内容。乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本

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

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

jQuery支持将多个方法链接在一起，比如介绍的多个animation()，这个链接也可以应用到其它方法，构成一个方法链。使用这个方法，对于同一个元素，链接多个方法，浏览器无需多次查找HTML元素。下面的方法，可以把css,slideUp,slideDown串接在一起：$("#p1") .css("color","red") .slideUp(2000) .slideDown(2000);

JavaScript语句是一行一行执行的，然而对于前面的动画效果语句，后面的语句可以在动画效果完成前就执行，因此可能会造成错误的结果。所以之前的hide,show,fadeIn,fadeOut,slideIn,slideOut,animation都支持一个callback可选参数，支持为这些方法添加一个回调函数，在动画完成之后调用。典型的语法如下：$(selector).hide(speed,ca

jQuery的使用stop()方法在动画结束之前停止动画。 基本语法如下：$(selector).stop(stopAll,goToEnd);可选参数stopAll 指明是否同时清除“动画队列”，缺省为false.意味着只停止当前活动的动画，之后的动画则继续运行。可选参数goToEnd 指明是否立即结束当前动画，缺省为false.因此缺省的stop()动作为终止指定HTML元素的当前动画效果。如：

前面的hide/show,slide in/out其实也具有动画效果，本篇介绍使用animate()实现自定义动画效果。基本语法如下：$(selector).animate({params},speed,callback);必选的参数为params,定义CSS用于动画效果的的属性。可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个可选参数为回调函

jQuery支持使用下面方法来实现HTML元素的滑动效果：slideDown()slideUp()slideToggle()slideDown方法 用来实现向下滑动动画效果，其基本语法为：$(selector).slideDown(speed,callback);可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个可选参数为回调函数，在slideD

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：fadeIn()fadeOut()fadeToggle()fadeTo()fadeIn()方法fadeIn() 实现淡入效果，其基本语法如下：$(selector).fadeIn(speed,callback);可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）第二个可选参数为回调函数，在fad

jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子： JQuery Demo $(document).ready(function () { $("#hide").click(function () {

学习了jQuery的选择器，就可以针对选择的HMTL标记或是元素添加事件处理，事件包括按键，鼠标，单击按钮等。下面为常见的DOM事件：鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunloadjQuery事件处理的语法在jQu