(原创:灰灰虫的家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)
相关推荐
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...
《jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML 、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、...
资源名称:jQuery UI参考手册 中文CHM版内容简介:jQuery UI是一个建立在jQuery Javascript 库上的小部件和交互库,您可以使用它创建高度交互的Web应用程序。本教程将向您讲解 jQuery UI 是如何工作的。本文给...
2.jQuery and jQuery UI Reference 1.2 API.zip; 3.jQuery UI 1.9带给我们的惊喜.zip; 4.jQuery.ui.docs.rar; 5.jquery-easyui-1.0.5.zip; 6.jquery-easyui-1.2.ZIP; 7.jQuery-easyui-docs.rar; 8.jquery-ui-...
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
jquery-ui.css、jquery-ui.js
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
bootstrap&jQueryUI例子
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs 、拉帘效果、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件
jquery ui jquery ui
wicket-jquery-ui Wicket 7.x,Wicket 8.x和Wicket9.x中的jQuery UI和Kendo UI集成 入门 为了开始使用此API,您可以下载适当的jar或设置Maven依赖项。 下载罐子 如果您不使用maven,则需要在此处下载核心jar: : ...
jquery UI chm API 帮助文档 jqueryui jquery UI chm API 帮助文档 jqueryui jquery UI chm API 帮助文档 jqueryui
jquery-ui+jquery-ui-rails