首页 > 编程笔记 > JavaScript笔记阅读：26

jQuery UI框架下载和使用教程（图文并茂，新手必看）

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库，包含底层用户交互、动画、特效和可更换主题的可视控件。

jQuery UI 的主要特点如下：

简单易用：继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。
开源免费：轻松满足自由产品和企业产品的各种授权需求。
广泛兼容：兼容各主流桌面浏览器，包括 IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
轻便快捷：组件间相对独立，可按需加载，避免浪费带宽、放慢网页打开速度。
美观多变：提供近 20 种预设主题，并可自定义多达 60 项可配置样式规则，提供 24 种背景纹理供选择。
开放公开：从结构规划到代码编写全程开放，人人均可参与文档、代码的编写与讨论。
强力支持：提供 CDN（Content Delivery Network，内容分发服务）支持。
完整汉化：开发包内置包含中文在内的40多种语言包。

jQuery UI的下载

在使用 jQuery UI 之前，需要下载 jQuery UI。下载步骤如下：
1) 打开 jQuery UI 主页面，如下图所示：

图 1 jQuery UI 主页面

2) 单击“Custom Download”按钮，进入 jQuery UI 的 Download Builder 页面，如下图所示：

图 2 Download Builder 页面

在 Download Builder 页面中可供下载的有 jQuery UI 版本、核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果库（Effects）。这里选择 1.13.2 版本。

jQuery UI 中的一些组件依赖于其他组件，当选中这些组件时，它所依赖的其他组件也都会自动被选中。

3) 在 Download Builder 页面的最底部，可以看到一个下拉列表框，其中列出了一系列为 jQuery UI 插件预先设计的主题，可以从这些提供的主题中选择一个，如下图所示：

图 3 选择为 jQuery UI 插件预先设计的主题

4) 单击“Download”按钮，即可下载选择的 jQuery UI。

jQuery UI的使用

jQuery UI 下载完成后，会获得一个包含已选组件的 ZIP 文件（jquery-ui-1.13.2.custom.zip），解压该文件，得到 jQuery UI 包含的文件，如下图所示：

图 4 jQuery UI 包含的文件

在 HTML 网页中使用 jQuery UI 插件时，需要将图 4 所示的所有文件及文件夹（即解压后的 jquery-ui-1.13.2.custom 文件夹）复制到 HTML 网页所在的文件夹下，然后在 HTML 网页的 <head> 标记中添加 jquery-ui.css 文件、jquery-ui.js 文件及 external/jquery 文件夹下 jquery.js 文件的引用。代码如下：

<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>

一旦引用了以上 3 个文件，开发人员即可向 HTML 网页中添加 jQuery UI 插件。例如要向 HTML 网页中添加一个滑块插件，可使用如下代码实现。
HTML 代码如下：

<div id="slider"></div>

添加滑块插件的 JavaScript 代码如下：

<script>
$(function() {
    $("#slider").slider();
});
</script>

jQuery UI框架下载和使用教程（图文并茂，新手必看）

jQuery UI的下载

jQuery UI的使用

相关文章