如何下载用于HTML5和CSS3编程的jQuery UI库

时间:2020-02-23 14:28:40  来源:igfitidea点击:

编写jQuery UI代码并不困难,但是对于HTML5和CSS3程序员来说,获取库的正确部分可能会有些混乱。
jQuery UI库比标准jQuery包大得多,因此,如果不需要,您可能不希望包含全部内容。

早期版本的jQuery UI允许您下载整个程序包,但是将各个元素存储在单独的JavaScript文件中。
通常有六个不同的脚本标记处于活动状态,只是为了使各种元素都就位。

更糟糕的是,存在一些依赖关系问题,因此在使用其他软件包之前,需要确保已安装某些软件包。
这使得一个简单的库实际上很难使用。

幸运的是,最新版本的jQuery UI使此过程变得更加简单:

  • 选择(或者创建)您的主题。

使用themeRoller从模板库中选择一个起点。
然后,您可以完全自定义主题以制作所需的内容(更改颜色,字体和其他元素)。

  • 下载主题。

themeRoller具有下载按钮。
准备下载主题时,请单击此按钮。

  • 选择您想要的元素。

刚开始一个项目时,您可能会选择所有元素。
如果发现页面加载太慢,则可以构建一个较小的版本,仅包含所需的那些元素。
现在,选择所有内容。

  • 下载文件。

选择所需的元素后,可以将其下载为zip文件。

  • 将zip文件的内容安装到您的工作目录中。

该zip文件包含许多文件和目录。
将css和js目录复制到您的网页所在的目录(通常是public_html或者htdocs目录)。
您不需要复制development-bundle目录或者index.html页面。

  • 如果安装多个主题,请仅复制其他主题中的主题信息。

所有主题都使用相同的JavaScript。
仅CSS(和相关的图像文件)发生变化。
如果要在项目中包含多个主题,只需复制CSS内容。
每个主题将是主CSS目录的不同子目录。

  • 链接到CSS文件。

使用标准链接技术链接到jQuery UI创建的CSS文件。
除了自定义CSS外,您还可以链接到自己的CSS文件或者使用内部CSS。
确保路径正确。

  • 链接到JavaScript文件。

jQuery UI工具箱还安装了两个JavaScript文件:标准jQuery库和jQuery UI库。
默认情况下,这两个文件都安装在js目录中。
您需要链接到两个文件。
有时您会看到最小化文件以及普通版本。
最小化版本将带有术语min嵌入。
两种版本都可以,但是最小化版本将加载得更快。

如果某些方法无法正常工作,请再次检查您的文件路径。
几乎总是会出现问题,因为您没有链接到所有正确的文件。
另外,请注意,由jQuery UI创建的CSS文件也包含图像。
确保主题具有关联的图像目录,否则您的项目可能无法正常工作。
如果您从下载中复制了整个CSS和JS目录,则应该没问题。