《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。主页面会引入以下基础文件:①
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
结果和之前的是一样的。

相关文章
|
22天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
14 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
23天前
使用HTML编写注册页面
使用HTML编写注册页面
12 1
|
30天前
|
Java
有关Java发送邮件信息(支持附件、html文件模板发送)
有关Java发送邮件信息(支持附件、html文件模板发送)
30 1
|
1月前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
1月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
21 0
|
1月前
|
Python
DTL与普通的HTML文件的区别
DTL与普通的HTML文件的区别。
67 5
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
29 0
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
N..
|
1月前
|
移动开发 前端开发 JavaScript
HTML文件
HTML文件
N..
13 1
|
10天前
错误或拦截页面的html代码
错误或拦截页面的html代码
14 0
错误或拦截页面的html代码