一些更新和改进的示例

我们都在学习，并且一直都在成为更好的网页设计师和开发者。 至少我希望我们是这样，这就是这个网站的意义所在！ 不时地回顾一下，确保我们已经尽力做到最好、最聪明，这始终是个好主意。 如果时间很长，很有可能有一些事情可以做得更好。 以下是我最近更新的一些示例。

Digg 头部

在 Christian Gorbach 的帮助下，我能够改进 Digg 头部示例 中下拉菜单的 jQuery。 以前，下拉菜单是通过切换构成该菜单的无序列表的 display 值来激活的。 此外，它依赖于这些菜单中的每一个都有一个唯一的 ID。 jQuery 能够比这要智能得多，以下是我们现在的方法

<script type="text/javascript">
	$(document).ready(function(){
	   $("#zone-bar li em").click(function() {
			var hidden = $(this).parents("li").children("ul").is(":hidden");
			
			$("#zone-bar>ul>li>ul").hide()        
			$("#zone-bar>ul>li>a").removeClass();
				
			if (hidden) {
				$(this)
					.parents("li").children("ul").toggle()
					.parents("li").children("a").addClass("zoneCur");
				} 
		   });
	});
</script>

除了代码更短、更灵活之外，它还具有更多功能。 现在，当另一个菜单打开时，菜单将关闭。 用 Christian 的话说，它在切换发生之前“保留了菜单的状态”。 此外，当前菜单突出显示现在通过应用类来完成，以便即使在鼠标移开时它也可以保持突出显示。 太酷了。

 

照片揭示器

沿着同样的思路，我对 照片揭示滑块 做了一些改进。 在这个新版本中，不再将任何变量硬编码到 javascript 中，它们都是从标记中图像的大小动态获取的。 您要添加的每张照片现在看起来都像这样

<td><div class="photo_slider">
	<img src="images/baloon.jpg"/>
	<div class="info_area">
		<h3>Climbing Mt. Hood</h3>
		<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
	</div>
</div></td>

这可以（并且将）变得更加智能。 现在，您可以看到主 DIV 再次被一个表格单元格包裹，这是因为带有一行的表格是防止任何换行的简单方法，因此图片行只会水平扩展。 这个表格和单元格可以直接从 jQuery 应用，而无需在标记中直接编码，只是还没有做到这一点。 衷心感谢 Benjamin Sterling 对此项目的耐心和帮助。 Firefox 在第一次页面加载时仍然对获取图像尺寸很糟糕……

 

精彩画廊综述

自从我第一次创建 精彩网站设计画廊综述 以来，出现了一些新的网站画廊。 添加了许多新网站。 有几个人发来请求，要求添加网站。 我很乐意这样做，以确保它仍然是这些类型网站的有用参考。

 

菜单淡入淡出

Romain Sauvaire 帮助我找到了一种处理 “菜单淡入淡出”示例 的好方法。 在这个新的更智能的版本中，脚本不再硬编码单击按钮时淡入淡出的按钮和内容区域，而是首先检查按钮是否已经淡出。 如果是，它会淡入并根据其 ID 揭示相应的内容区域（其中有一些额外的智能）。 如果不是，它什么也不做，因此不会浪费任何循环。