《jQuery UI 开发指南》——1.4　在HTML页面中应该引入哪些文件-CSDN博客

本节书摘来自异步社区《jQuery UI开发指南》一书中的第1章，第1.4节，作者：【美】Eric Sarrion 译者：罗晴明 ,包勇明更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4　在HTML页面中应该引入哪些文件

在前面的几节中，我们知道了jQuery UI是由不同的CSS和JavaScript文件组成的。此外，有些文件是压缩过的，而有些却没有压缩。因此问题就来了：要使用jQuery UI，我们的HTML页面中应该引入哪些文件呢？

1.4.1　未压缩文件
未压缩的文件位于jQuery UI安装目录（jqueryui）下的development-bundle目录。

1．JavaScript文件
ui目录（位于development-bundle下）包含了JavaScript文件。jquery.ui.core.js文件包含了基本功能（必须引入），而其他的文件需要时再引入。最终会有一个包含了所有JavaScript文件的custom.js（例如，jquery-ui-1.8.16.custom.js）文件，这样就无须单独引入每个文件了。minified目录（位于ui目录下）包含了压缩格式的相同文件。

2．CSS文件
themes目录（位于development-bundle目录下）包含了CSS文件。它由多个目录组成，每个目录包含一个主题（比如，base、smoothness及ui-lightness目录）。每个主题下有一个images目录和其他的CSS文件。

jquery.ui.core.css文件包含了基本功能（必需的），而其他文件需要时再引入。jquery.ui.theme.css文件定义了主题自身的样式（必需的）。

jquery.ui.base.css文件包含了development-bundle目录下除了jquery.ui.theme.css外的所有文件。jquery.ui.all.css文件包含了所有的文件（即jquery.ui.base.css和jquery.ui.theme.css）。

最终，会有一个包含所有CSS文件的custom.css（例如，jquery-ui-1.8.16.custom.css）文件，而无须单独引入每个文件了（这一点对于jquery.ui.all.css也是一样的，只是jquery.ui.all.css通过CSS指令@import引入其他文件，而custom.css把所有文件的内容都包括在内了）。

3．引入未压缩文件的HTML页面示例
我们想显示一个包含两个选项卡的简单页面。主要的JavaScript文件是jquery.ui.tabs.js，主要的CSS文件是jquery.ui.tabs.css。主页面会引入以下基础文件：①
screenshot

这里的jquery.js文件和jqueryui目录位于同一层目录级别。它是标准的jQuery JavaScript文件。

core.js文件是必须引入的，tab.js文件还需要引入依赖的widget.js（正如tab.js文件中指出的）。②

core.css文件是必须引入的，theme.css文件也是必须引入的。tab.css文件则包含了选项卡的详细样式定义。

既然已经搭建了页面的基本模块，我们再创建并标记两个选项卡，并在每个选项卡里面添加一些文字。下面的代码紧接着之前引入基础文件的那部分代码。
screenshot

这段脚本的结果（一个包括两个选项卡的页面）如图1-5所示。
screenshot

1.4.2　压缩文件
使用压缩文件能减少HTML页面的加载时间。

1．JavaScript文件
js目录（位于jQuery UI安装目录下面，这里是jqueryui）包含了JavaScript文件。这里只需要jquery-ui-1.8.16.custom.min.js文件。目录中的另外一个文件是压缩版本的jQuery。

2．CSS文件
css目录（位于jQuery UI安装目录下面，这里是jqueryui）包含了每个已安装主题的子目录（例如，smoothness和ui-lightness目录）。

每个主题都包括了一个images目录和一个会被引入到HTML页面中的CSS文件。这和最终的custom.css（比如，jquery.ui-1.8.16.custom.css）是一样的，是个压缩版本。

3．引入压缩文件的HTML示例页面
我们想显示一个有两个选项卡的页面（和之前的一样）：
screenshot

除了jquery.js文件外，现在只需要两个文件了：

jQuery UI 的JavaScript全局文件（jquery-ui-1.8.16.custom.min.js）；
与使用的样式相关的整个jQuery UI CSS文件（smoothness/jquery-ui-1.8.16.custom.css，与smoothness主题相关的文件）。
现在再添加与之前一样的HTML代码来创建、标记和填充选项卡：
screenshot
结果和之前的是一样的。