jQuery UI入门 – 工作达人在中国

2015/09/07 最新的jQuery UI稳定板1.11.4: 搭配 jQuery1.6+，不搭布景主题，点击进入下载－jquery-ui-1.11.4.custom.zip。

2014/11/24：这一页的原文应该移至http://learn.jquery.com/jquery-ui/getting-started/，ㄚ琪还是会不时地更新。

2013/08/09：有新版1.10.3释出，请从jQuery UI 1.10.3下载新程式。

阅读本文之前请先下载jQuery之后先读jQuery文件，当然你对HTML应该也已经很熟了，不过还是可以回头看看HTML5的教学。

当然可以不用下载档案，就直接使用cdn jQuery以及cdn jQuery UI就行了，可以直接参考Google主机托管的函式库。

[adsense][/adsense]

jQuery UI是什么?

jQuery UI是一个建立在jQuery JavaScript函式库上的小工具跟互动式函式库，你可以用来建立高互动的web应用程式，本指南的目的是让你提高jQuery UI工作速度，跟着下面开始吧。

从查阅示范开始

要感觉一下jQuery UI的功能，可以查阅jQuery UI 的 Demos展示及说明文件。

在范例那里，导览列出所有jQuery UI提供的互动跟小工具，选一个互动或是小工具，你会看到特定外挂的几个范例组态，每个范例允许你检视原始码，改变布景，将网址加入书签，举一个例，查阅小工具的可折叠内容展示页。

建构你自订的jQuery UI下载

一旦你对jQuery UI有基础的了解，你就可以准备尝试一下！现在是你绞尽脑汁到jQuery UI 网站的Download Builder下载一份jQuery UI的时候了，jQuery UI的下载生成器允许你选择想要下载的部份来取得你专案自订的版本，这里有三个步骤来建构你自订的jQuery UI下载：

步骤 1：选择你需要的部份

下载生成器的主要栏位列出jQuery UI所有的分类：核心、互动、小工具跟效果，jQuery UI的有些部份依赖另一个部份，只要勾选你要下载的小工具的核选框，任何需要的小工具也会自动被勾选，如果有不相依的情况，也会有警告出现，你选择的部份会自动结合进入自订的jQuery UI javascript的档案叫做jquery-ui-1.7.1.custom.min.js，小工具的文件说明可以参阅Category: Widgets，ㄚ琪已经翻译了jQuery UI Menu Widget的部份，大伙儿可以去了解一下。
Configuring a download

步骤 2：选择一个布景 (或是使用你自己的自订布景)

在下载生成器的右边栏位，你会发现有一个栏位有很多预先设计好的布景可以选择给你的小工具用，你可以选择我们提供的布景，也可以使用ThemeRoller设计你自己的布景（后面有更多的介绍）。

进阶布景设定：下载生成器的布景部份也提供了一些进阶的组态设定给你的布景，假如你计划使用多重布景在单一页面上，这些栏位就会派上用场，假如你只是在一个页面上使用一个布景，你可以完全忽略这些设定。

步骤 3：选一个jQuery UI版本

在下再生成器这里最后一个步骤选择一个版本编号，这是很重要的一个步骤因为jQuery UI版本被设计来配合特定版本的jQuery，目前的版本是：jQuery UI 1.7.1：跟jQuery 1.3搭配以及 jQuery UI 1.6：跟jQuery 1.2.6搭配。

按下Download！

你已经完成了下载生成器的设定！按下download按钮，你会得到一个你选择部份的自订zip档案，顺着那些步骤，在这里你也可以取得预设的jQuery UI 1.7 ( zip ~240k )下载，这个档案包含UI 1.7的所有部份跟Smoothness布景。

下载之后：介绍使用jQuery UI

一旦你下载了 jQuery UI，你会得到一个zip有下列的档案：

/css/
/development-bundle/
/js/
index.html

基本概观：在web网页上使用jQuery UI

用文字编辑器打开index.html，你会看到连结：你的布景、jQuery跟jQuery UI，一般来说，你会需要将这3个档案放在任何要使用jQuery UI小工具跟互动的网页上：

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

一旦你放入了必要档案，你就可以加些jQuery的工具在你的页面上，举例来说，要作一个日期选取的小工具，你可以文字输入的元素到你的页面上然后呼叫.datepicker()，项这样： HTML: <input type="text" name="date" id="date" />

JS:

$('#date').datepicker();

Example Screenshot

就是这样！

所有jQuery UI小工具跟互动展示，可以查阅jQuery UI 的 Demos展示及说明文件。

自订你需要的jQuery UI

jQuery UI允许你用几个方法来自订，你已经见过下载生成器如何允许你自订你的jQuery UI那一份来收入你要的部份，但是还有一个别的方法可以自订你要实作的的程式码。

基本的jQuery UI：使用选项

每一个jQuery UI外挂都有一个预设的配置可以迎合最基本常用的使用情况，但是假如你想要一个不同预设组态的外挂，你可以使用”options”来覆盖每一个预设组态，这些选项的参数是一些传进jQuery UI小工具的特性，举例来说，滑块的小工具有个定位的选项，它允许你指定滑块应该是水平或垂直方向的，要载你的页面上设定滑块的选项，你只要使用一个参数传入，像这样：

$('#mySliderDiv').slider({
      orientation: 'vertical'
});

你可以传入很多不同你要的选项，每个选项后加一个逗号（除了最后一个之外）：

$('#mySliderDiv').slider({
      orientation: 'vertical',
      min: 0,
      max: 150,
      value: 50
});

只要记得要大括号{}刮起你的选项，你就可以弄得很好，当然，上面的例子仅仅提到你可以对jQuery UI作什么，要取得jQuery UI小工具详细的资讯，请浏览jQuery UI 文件说明。

视觉化自订：设计一个jQuery UI布景

假如你想要设计你自己的布景jQuery UI有一个很炫的应用程式可以达到这个目的，叫做ThemeRoller，你可以按下在jQuery UI导览里的design a custom theme来取得，或只是进入这一页：ThemeRoller.com（注：参阅本页ThemeRoller中文说明）。

ThemeRoller提供了自订的介面来设计jQuery UI小工具的所有元素，当你在左边栏位调整”levers”，右边的小工具就会反应你的设计，ThemeRoller的Gallery标签提供很多预先设计好的布景(这跟下载生成器提供的一样）the same ones offered by the download builder) 让你调整或下载使用。

ThemeRoller Example