1.8 JavaScript支持的插件
本书中的一些插件完成的事情可能单用CSS不能完成,它们通过使用两个JavaScript插件库来完成。这两个插件库分别是来自配套书Plug-in JavaScript中的PJ.js和专为本书而写的PC.js。PJ.js中的函数提供了大量的定位、调整大小和转换效果,然后由PC.js中的函数实现各种增强的CSS效果。
使用这些库非常容易,在相关小节中也有详细解释,也就是在Web页面的头部包含下列HTML代码行:
<script src="PJ.js"></script><script src="PC.js"></script>
这行代码从当前文件夹(但也可从任何地方导入它们)加载库并执行基本的初始化。这些文件也包含在可通过plugincss.com网站下载的plug-ins.zip文件中。
1.8.1 将JavaScript支持的CSS与纯CSS同时引用
为了使用本书中的所有插件(包括纯CSS和JavaScript支持的CSS),同时为了不必总是想着要导入它们,笔者建议将下列两行代码添加到使用它们的所有Web页面的头部:
<link rel="stylesheet" type="text/css" href="PC.css" />
<script src="PJ.js"></script><script src="PC.js"></script>
记住,如果从非当前文件夹的其他地方导入文件,要用正确的路径引用文件名。
注意:
有一个名为PJsmall.js的较小版的PJ.js文件,该文件也可从plug-ins.zip下载中获得。它包含了所有相同的函数,工作方式也相同,只是被压缩为PJ.js文件的二分之一。因此,在文件大小或可用带宽成问题的情况下,可使用这个较小的文件。
1.8.2 禁用JavaScript的用户
使用JavaScript支持的插件有一个不利方面,因为少量用户在浏览器中禁用JavaScript。因此你可能选择不使用JavaScript支持的插件,这太令人遗憾了,因为它们提供了一些非常好的增强功能。
可以包括如下所示的HTML代码段,要求用户在网站上启用JavaScript(在这种情况下,应记住那些不能很好降级的增强功能只是对禁用JavaScript的用户不可用):
<noscript>
<h1>JavaScript Enhanced</h1>
This website is enhanced with JavaScript and you will be able to
view it at its best only if you enable JavaScript in your browser.
</noscript>
另外,更友好的方法(虽然要多花些时间)是在每次使用JavaScript支持的CSS时都提供<noscript>…</noscript>这样一个HTML代码段。这样,非JavaScript用户将感觉不到有区别。
1.9 小结
至此,你应对样式表的工作原理、CSS与DOM如何相关及如何导入插件有了一个基本的了解。下一章,我们将讲述CSS速成法。学习完该章,你将能理解并使用本书中的所有插件,也能够通过调整或扩展它们创建自己的变体形式。