02-导言
13.0 导言
jQuery UI窗口组件集提供了许多现成的功能，但是你有时可能选择创建符合特定需求的自定义元素。你可能希望更好地控制HTML标记，或者只是想要得到轻量级的JavaScript代码。不管哪一种原因，本章将展示如何简洁地编写项目中所用的自定义组件。这些秘诀在编写的时候注重易用性，相比配置更重视简洁性。
秘诀13.1展示如何创建自定义工具提示，用于需要通过提供附加内容或者指南吸引用户注意力的场合。秘诀13.2将说明如何构建文件树样式的菜单，使用户能够深入探索网站层次结构。在秘诀13.3中你将学习如何创建垂直折叠的组件。秘诀13.4将说明如何使用页间链接和对应的目标创建文档标签。秘诀13.5说明如何通过相应的操作创建基本模态窗口。秘诀13.6解释如何构建简单的下拉式菜单。秘诀13.7研究按钮控制的图片旋转器的创建，重用了秘诀13.4中的页间链接技术。秘诀13.8从秘诀13.3中吸取经验，创建水平面板代替垂直折叠组件。
注意
下面的范例贯穿本章，在各个例子中不再特意强调。
每个秘诀一开始检查文档中是否确实存在必要的元素。如果不存在则退出函数。如果该条件不符合就没有必要进行什么后续操作，这样就阻止了不必要地执行代码：
// 元素存在吗？
if (!$('#foobar').length) {
// 如果不存在,退出
return;
}
在本章中都会使用一段通用的代码来撤销只用于触发JavaScript事件的后续链接。 blur() 方法用于去掉虚线边框，否则这个边框会一直存在（直到用户单击其他位置）， return false 告诉浏览器不要跳转到链接的 href 属性所指网页：
// Nofollow.
this.blur();
return false;
为了真正启动动态功能，每个秘诀都以对jQuery的 document.ready() 函数的调用而结束，确保在试图应用事件监听器等功能之前DOM（不一定包括所有图像资源）已经加载完毕：
//启动各项操作
$(document).ready(function() {
init_foobar();
});
有些秘诀在HTML文档的 <head> 元素中有如下代码。大部分人认为 document.write() 是JavaScript中过时的方法，因为这个命令强制浏览器暂停以渲染页面。但是，当使用CSS预先隐藏的内容以后将通过JavaScript显示时，这正是我们需要的效果：
<script type="text/javascript">
/* <![CDATA[ */
document.write('<link rel="stylesheet" type="text/css" href="preload.css" />');
/* ]]> */
</script>
本质上，在页面开始渲染之前，应用到 <head> 的一个CSS文件预先隐藏所有的内容，这些内容将在以后用户与页面交互的时候显示。我们用JavaScript编写CSS引用的原因是为了在禁用JavaScript的时候，所有内容可见且完全可以访问。有关这种技术的更多内容，参阅Peter-Paul Koch的“Three JavaScript articles and one best practice”（http://www.quirksmode.org/blog/archives/2005/06/ three_javascrip_1.html#link4）。