JQuery霹雳：六、JQuery UI

JQuery霹雳：六、JQuery UI

2010年01月29日 星期五 12:33

(原创：灰灰虫的家http://hi.baidu.com/grayworm)
JQuery UI是利用JQuery开发的一系列的UI小插件（如日历、QQ面版、排序列表等），我们可以直接用它来构建具有很好交互性的web应用程序。这篇文章就是介绍如何使用JQuery UI的，感兴趣的话继续往下看吧^_^：

一、首先、我们来体验一下JQuery UI能为我们带来什么样的外观效果：
点击这个网址（http://jqueryui.com/demos/accordion/#fillspace）进入到下面的界面

《图1》
在上面的图中可以分成三部份：
绿色部份：JQuery UI提供的工具类别（）。
灰色部份：该UI工具的效果预览，往下拖动滚动条可以看到调用的源代码。
蓝色部份：该UI工具可以实现的多种界面效果。
从上面的页面中，我们可以体验出JQuery UI的炫酷功能，那如何使用它呢。

二、下载JQuery UI脚本包
在JQuery主页面上点击上面的“UI”超链接，再在新页面中点击“Download”超链接。

《图2》
进入到“脚本包的设置界面”，下面我们通过三步来下载JQuery脚本包。
第一步：选择需要的组件
在“脚本包的设置界面”把JQuery组件分成了几个组：core,interations,widgets和effects。有此组件会依于别其它组件，我们只需要勾选我们需要的组件即可，它会自动替我们选中该组件所依赖的组件。我们选中的这些组件会被打成jquery-ui-1.7.1.custom.min.js文件，以供下载使用。

《图3》

第二步：设置组件主题
在“脚本包的设置界面”右边我们可以看到一个下拉列表，这个列表中就是插件可选的系统主题样式。当然我们也可自定义插件的样式，这将在后面介绍。

《图4》

第三步：选择生成脚本的版本号
最后一步是择生成脚本的版本号，这是很重要的一步，因为JQuery UI脚本包与JQuery版本是一一对应的，例如：如果JQuery版本号是1.3*，那我们应当选择1.7.2；如果JQuery版本号是1.4.*那应当选择1.8rc1。

《图5》

完成上面三步后，我们就可以点击“DownLoad”按钮下载我们需要的JQuery UI脚本包了。

三、JQuery UI牛刀小试
上面下载的JQuery UI脚本包是个压缩包，它包含下面的文件结构
/css/
/development-bundle/
/js/
index.html
下面我们看看如何在页面上应用JQuery UI脚本包。
在记事本中打开index.html文件，可以看到在head标记中添加了一些引用。

《图6》
一般需要导入三个文件
1.JQuery UI样式表文件
2.JQuery脚本库文件
3.JQuery UI脚本库文件

这些引用语句就是把JQuery UI脚本包中的内容导入界面中，下面我们就可以在页面中使用JQuery UI中的一些小组件了。
如使用日历组件，我们只需要在日期文本框的相应事件中调用datepicker()方法就可以了：
HTML: <input type="text" name="date" id="date" />
JS: $('#date').datepicker();

《图8》

四、自定义JQuery UI
前面我们能够下载并使JQuery UI的脚本包。如何使脚本包更适合于我们的网站风格，更符合使用的需求呢。下面我们来看看。
1.使用options参数
每个JQuery UI插件都有默认的基本设置，它能够满足大部分情况下的需求。如果不想使用插件的默认设置，我们可以使用"options"参数来修改插件的设置。"Options"参数就是传递给JQuery UI插件的一组属性。
比如：滚动条插件slider就有个参数orientation，用来设置滚动条是水平还是竖直，在使用的时候我们只需要把该参数传递进去就可以了。
$('#mySliderDiv').slider({
      orientation: 'vertical'
});
当然该滚动条插件的参数不至这一个，还有其它的内容，如：
$('#mySliderDiv').slider({
      orientation: 'vertical',
      min: 0,
      max: 150,
      value: 50
});
需要大家记住的是，需要在options参数两边加上花括号{}，上面我只是用来说明options参数的作用，如果需要详细了解每个插件中有哪些参数，那需要你去看JQuery UI帮助文档了，可惜的是到目前为止还没有一篇像样的中文文档。

2.可视化设计JQuery UI的界面主题
如果你感觉JQuery UI的JS包中的样式不漂亮的话，那我们还可以使用ThemeRoller来定义符合我们需求的插件主题样式。在JQuery UI界面中单击“Themes”连接进入ThemeRoller界面

《图9》

《图10》
ThemeRoller提供了一个自定义插件界面主题的设计器，JQuery UI插件的所有界面样式都可以使用它来自定义。在左侧有JQuery UI插件的各种设置参数，在右边就会显示出其预览效果。
如果感觉满足你要求的话，那点击左上方的黄色按钮“Download theme”下载该主题的JQuery UI主题包。

在左侧上面中间有个选项卡"Gallery"，它里面列出了JQuery UI预设的多种样式外观，以日历形式列表显示。我们可以点击各种风格，在右侧预览各插件的效果。如果认为适合的话，就可以点击Download下载该款主题的JQuery UI脚本包

《图11》

JQuery UI相关教程：

《图12》
英文版。定义45美元，没有money，没买过，更没看过5555555555......................

(原创：灰灰虫的家http://hi.baidu.com/grayworm)