可扩展侧边栏菜单屏幕截图
这是第一个(希望有更多)屏幕截图,它将提供一个简单的 jQuery 演示的快速教程。我计划根据我最近的演讲至少再做 2-3 个——希望我能在接下来的一周(或几周)内陆续发布。(哦,如果我听起来很累,请见谅——因为我确实很累。)请享受!
jQuery 演示 - 可扩展侧边栏菜单 在 Vimeo 上
或者:观看 原始(.mov,3.85 MB)视频。(我猜想这个版本要清晰得多——但并非所有人都支持 Quicktime 文件)
这是第一个(希望有更多)屏幕截图,它将提供一个简单的 jQuery 演示的快速教程。我计划根据我最近的演讲至少再做 2-3 个——希望我能在接下来的一周(或几周)内陆续发布。(哦,如果我听起来很累,请见谅——因为我确实很累。)请享受!
jQuery 演示 - 可扩展侧边栏菜单 在 Vimeo 上
或者:观看 原始(.mov,3.85 MB)视频。(我猜想这个版本要清晰得多——但并非所有人都支持 Quicktime 文件)
你非常善于解释所有内容,但我真的觉得你应该在不那么疲惫的时候制作这些。 :)
看起来不错!我期待着更多这样的内容。
顺便说一句,这种类型的菜单通常被称为“手风琴菜单”,而不是“可扩展侧边栏菜单”。为了让你的屏幕截图更引人注目,我建议使用这种设计模式的通用名称。;)
感谢你制作这些!请多制作一些!
你使用什么文本编辑器?
@Jason: 注意到了 ;-)
@Matt: 哎,是的——手风琴菜单。凌晨 3:30 时,一切都变成了“可扩展侧边栏菜单”。
@Erin: 我使用的是 Mac 上的 Subethaedit(试试 免费版)。它具有实时协作编辑功能和实时网页预览功能。我非常喜欢它!
很棒的屏幕截图!我期待着更多这样的内容。我想看看关于 ajax 功能以及 jQuery 表单用法的屏幕截图。
谢谢,
Rich
我是法国人,
超级教程,感谢你制作这些!
谢谢,
Roger
简单、实用、做得好…
真的很棒!谢谢!
这个屏幕截图让我想起了 Ruby on Rails 的那些!
我喜欢!我喜欢!
这太棒了,John。我认为这些屏幕截图会真正帮助许多人打开 jQuery 的启蒙之门。我认识的那些网页设计师中有一两个不是脚本编写者,他们可能觉得实现如此看似复杂的效应超出了他们的能力。我知道,当他们看到这个屏幕截图时,这将是对他们的一种顿悟。
看到创新者本人在工作中真是太棒了。非常感谢。
Pingback: John Resig 的第一个 jQuery 屏幕截图 - 在“代码即一切,然后有了 AJAX!”
我猜你使用的是 ie,因为它在 Firefox 中看起来像一坨屎。
@zig: 我不确定你在说什么——这个屏幕截图在 Firefox 2.0 和 Safari 2.0 中都演示了代码。你能重现这个结果吗?
或者“手风琴”也行.. ;)
希望你继续包含 .mov 文件,因为 Flash 对我来说根本不起作用。
太棒了!
如果也能展示 parent().next() 的 xPath 版本,那就更酷了。
干得好!
Glen
很棒的演示,John。这样的东西真的帮助像我这样的普通人“理解”jquery。
简单的问题:如果 DD 块已经展开,是否可以阻止它向上滑动然后向下滑动?
干杯
Grant
嗨,Grant,
你可以保存对菜单当前活动部分的引用,并参考该引用来防止你提到的情况。
如果你需要这个功能,或者可能需要更多功能,可以看看我的 .
…我的手风琴菜单插件:http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
谢谢 Jörn,我会看看!
Pingback: Weblogger.ch » jQuery: 链接
为了确保当前打开的 dd 块不会上下滑动,你也可以检查它是否打开,然后不做任何操作。
如果它已打开,那么 $(this).parent().next() 将可见。
所以你可以将整个内容包装在
if(!$(this).parent().next().visible()){
//执行酷炫操作
}
**注意 – 我是 jQuery 新手,不确定 .visible() 是否是它可以返回的属性..(John?)**
这太棒了,我在看到这个屏幕截图之前阅读了很多文档,只是有点理解如何实现这样的东西,看到屏幕截图让它变得完全清晰。非常感谢!捐赠按钮在哪里? ;-)
您好,您的手风琴菜单很棒,祝贺您;)。我想知道,它是什么类型的许可证?我看不到任何。谢谢!
有人可以帮助我使用 cookie(记住状态)扩展此脚本的功能 + 一些开关以默认情况下使预定义的选项卡折叠/展开吗?
我想拥有与这个网站的菜单类似的功能:http://miejsca.org/
如果需要,我愿意付费,然后与大家分享代码,请通过 mikolaj-i [at] o2 . pl 给我发邮件。
稍微离题,抱歉,但你在这个屏幕截图中使用什么程序或应用程序来编辑文件?我是一个 PC 用户,因为受够了花时间处理操作系统,所以要“跳槽”到 mac…
谢谢 John,也许还有其他可能回答我问题的人。
@Henrik:我使用一个叫做 iShowU 的程序。它很简单,便宜,而且满足我的需求。
http://shinywhitebox.com/home/home.html