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)