版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
jQuery UI基础7.1jQueryUI简介7.2下载jQueryUI7.3jQueryUI项目文件7.4jQueryUI预览7.5在HTML页面中应该引入的文件单元总结
7.1jQueryUI简介
jQueryUI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件。它是附属于jQuery的一个用户界面库，包含了小组件(Widget)、特效、动画和交互功能。
jQueryUI库中的小组件都是可主题化的，“ThemeRoller”是一个WebApp，为jQueryUI设计和下载自定义主题提供了直观的界面，它可以简化创建主题的过程，使jQueryUI具有高级外观的效果。jQueryUI框架还包含了一个非常完备的CSS类的集合，这些CSS类对于创建应用程序的主题非常有用。尽管其他插件也可能具有很多与之类似的功能，但jQueryUI具有统一的基础代码库和API、可靠的总体质量、灵活的UI元素，这一切使得jQueryUI成为构建Web应用程序不可或缺的宝库。
7.1.1jQueryUI的优势
jQueryUI能够被大众所认可，是因为它具有许多的优势：
►简单易用：继承了jQuery简易使用的特性，提供高度抽象的接口，可短期改善网站易用性。
►开源免费：采用MIT和GPL双协议授权，可轻松满足自由产品至企业产品的各种授权需求。
►广泛兼容：兼容各主流桌面浏览器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+等低版本浏览器。
►轻便快捷：组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。
►标准先进：支持WAI-ARIA，通过标准XHTML代码提供渐进增强，保证低端环境可访问性。
►美观多变：提供近20种预设主题，并可自定义多达60项可配置样式规则，提供24种背景纹理选择。
►开放公开：从结构规划到代码编写全程开放，文档、代码、讨论，人人均可参与。
►强力支持：Google为发布代码提供CDN内容分发网络支持。
►完整汉化：开发包内置包含中文在内的40多种语言包。
7.1.2jQueryUI的不足
jQueryUI的优点很多，但也存在以下不足：
►代码不够健壮：缺乏全面的测试用例，部分组件Bug较多，不能达到企业级产品开发要求。
►构架规划不足：组件间API缺乏协调，缺乏与之配合的使用帮助。
►控件较少：相对于Dojo、YUI、ExtJS等成熟产品，可用控件较少，无法满足复杂界面的功能要求。
►版本间差异较大：相邻两个版本可能使用方法相差较大。
7.2下载jQueryUI
打开jQueryUI官网(/)，点击首页右侧“Stable”按钮下载最新稳定版的jQueryUI库，目前最新稳定版本为v1.12.1，如图7-1所示。图7-1jQueryUI官网首页
7.2.1创建自定义jQueryUI下载
点击官网首页的“CustomDownload”按钮，或者在浏览器地址栏中直接输入URL：“/download”，进入jQueryUI的下载生成器(DownloadBuilder)页面，如图7-2所示。图7-2jQueryUI下载生成器(DownloadBuilder)页面
7.2.2创建自定义主题下载
如果想要编辑自己的主题，可以点击官网首页的“Themes”按钮，或者在浏览器地址栏中直接输入URL：“/themeroller/”，进入主题编辑器(ThemeRoller)页面，如图7-3所示。图7-3主题编辑器(ThemeRoller)页面
1. ThemeRoller界面
ThemeRoller界面分为左右两部分，左边部分上有各种不同的面板，各面板分别是全局字体和圆角半径设置、小部件容器样式、可点击元素的互动状态，及覆盖和阴影的各种样式。这些面板允许配置各种CSS属性，比如字体的尺寸、颜色、粗细，背景颜色和纹理，边框颜色，文本颜色，图标颜色，圆角半径，等等。右边部分是用户操作面板，可以点击上方的按钮切换面板中的内容。按钮分别是“RollYourOwn”(自定义面板)、“Gallery”(主题馆)、“Help”(帮助手册)。
2. 主题馆(Gallery)
主题馆包含一些预先设计的主题可供选择，可以直接点击主题下方的“Download”按钮下载主题，也可以点击主题下方的“Edit”按钮，将主题信息加载到RollYouOwn面板方便用户在该预设主题中进行自定义修改。界面如图7-4所示。
3. 自定义面板(RollYourOwn)
自定义面板包含了主题中所有可以被设置的内容，对主题进行修改后，点击上方的“Download”按钮即可下载修改后的主题。界面如图7-4所示。图7-4RollYourOwn和Gallery界面
7.3jQueryUI项目文件
下载的jQueryUI是一个压缩包(.zip)文件，它包含了jQueryUI的源代码、示例及文档(英文)。把它解压缩将得到一个“jquery-ui-1.12.1”的目录(如图7-5所示)，该目录中包含了以下内容：
►external文件夹：里面放置的是jQueryUI依赖的jQuery库。加载的最新版本是v1.12.4，与本书使用的是同一个版本。
►images文件夹：包含了该主题依赖的一些图片文件。
►两个记事本(.txt)文件：包含了jQueryUI项目的一些说明和许可。
►若干样式表(.css)文件：包含了一个默认的jQueryUI主题样式。
►两个JavaScript(.js)文件：包含了jQueryUI库的完整副本。
►“index.html”文件：包含了jQueryUI中的小组件和CSS类的概览文件。
►“package.json”文件：包含了该项目的一些配置内容。图7-5jQueryUI目录结构
可以发现，项目中同名的JavaScript(.js)文件和样式表(.css)文件都有两个。以JavaScript文件为例，后缀名包含“.js”和“.min.js”两种。其中：后缀名为“.js”的文件保留了代码中的换行、空格、注释等信息，用于开发调试，文件体积较大；后缀名为“.min.js”的文件去掉了代码中所有的格式，用于发布，体积较小。样式表文件同理。
7.4jQueryUI预览
用浏览器打开jQueryUI默认项目中的“index.html”文件，可以看到一个演示页面，演示我们在下载生成器中选择的小部件和主题。此处我们使用的是首页默认配置，界面如图7-6所示。图7-6jQueryUI项目首页
在这个文件中，我们可以看到jQueryUI添加的不同功能，包括：
►折叠菜单(accordionmenu)。
►输入框的自动补全机制(autocompletionmechanism)。
►漂亮的按钮(button)和复选框(checkbox)。
►便于页面展示的选项卡机制(tabmechanism)。
►显示在页面最上层的对话框(dialogbox)。
►自定义图标(customicon)。
►滑块(slider)。
►日历(datepicker)。
►进度条(progressbar)。
7.5在HTML页面中应该引入的文件
7.5.1创建项目新建一个项目，取名为“jQueryUI”，在项目中添加一个js文件夹，将jQuery库文件放入，再找到“jquery-ui.min.js”、“jquery-ui.min.css”文件直接粘贴进项目中；将images文件夹也直接粘贴到项目中；最后新建一个index.html文件，用于编写代码。目录结构如图7-7所示。图7-7目录结构
7.5.2编写代码
打开index.html文件，首先添加css和js的引用，代码如下：
然后在页面中放入一个超链接(a元素)：
<body>
<aid="mybtn"href="#">超链接</a>
</body>
最后添加jQuery代码：
<script>
$(document).ready(function(){
$('#
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 合同书责任者最简单三个步骤
- 合同生效日期说明函
- 鲁滨逊人物课件
- 《客服岗位职责》课件
- 《高血压病及其相关》课件
- 小学五年级上册科学课件教科版第3课 心脏和血液
- 零售学第一章 导论
- 小学六年级科学课件教科版第2课 昼夜交替现象
- 四年级上册科学教科版课件第8课 制作我的小乐器
- 《地下水系统》课件
- 2023年民航华北空管局招聘笔试真题
- 北方工业集团 笔试题目
- 医药高等数学知到智慧树章节测试课后答案2024年秋浙江中医药大学
- 企业员工心理健康管理培训一
- GB/T 44823-2024绿色矿山评价通则
- 2024年湖北省高考政治试卷真题（含答案逐题解析）
- 社区教育志愿者培训教材
- 北京邮电大学《自然语言处理课程设计》2022-2023学年期末试卷
- GB/T 44679-2024叉车禁用与报废技术规范
- 从偏差行为到卓越一生3.0版
- 创新创业基础学习通期末考试答案2023年
评论
0/150
提交评论