博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件
阅读量:6636 次
发布时间:2019-06-25

本文共 2049 字,大约阅读时间需要 6 分钟。

本节书摘来自异步社区《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
结果和之前的是一样的。

转载地址:http://zrdvo.baihongyu.com/

你可能感兴趣的文章
存储篇(1)
查看>>
Go常用的数据结构
查看>>
正则 (入门篇)
查看>>
前端语言学习干货合集!
查看>>
简单了解Docker与自学教程
查看>>
选用Vue做MVC架构模式
查看>>
喜马拉雅、懒人听书、蜻蜓:有声阅读未来弄潮儿花落谁家
查看>>
Linux下给PHP安装Redis扩展
查看>>
听说拼多多因漏洞被薅了200亿?- 谈谈软件测试
查看>>
在 Android 中使用 JNI 的总结
查看>>
那些年,我爬过的北科(十)——搜索案例之ElasticSearch的使用
查看>>
Django实战1-权限管理功能实现-04:系统入口
查看>>
Google发布最新「语音命令」数据集,可有效提高关键词识别系统性能
查看>>
黑苹果 安装篇
查看>>
Webpack4 学习笔记 - 04:使用 Plugins 插件
查看>>
聊聊flink TaskManager的managed memory
查看>>
Java精讲:生产者-消费者
查看>>
使用Visual Studio Code编写和激活ABAP代码 (上)
查看>>
【收藏干货】axios配置大全
查看>>
Scrum:为什么Sprint长度应该短?
查看>>