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

本节书摘来自异步社区《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。主页面会引入以下基础文件:①
《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件

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

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

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

既然已经搭建了页面的基本模块,我们再创建并标记两个选项卡,并在每个选项卡里面添加一些文字。下面的代码紧接着之前引入基础文件的那部分代码。
《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件

这段脚本的结果(一个包括两个选项卡的页面)如图1-5所示。
《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件

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示例页面
我们想显示一个有两个选项卡的页面(和之前的一样):
《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件

除了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代码来创建、标记和填充选项卡:
《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件
结果和之前的是一样的。

上一篇:程序员分享前端初学者入门学习顺序


下一篇:优秀学生高效在线学习的方法,你解锁了吗?