可扩展侧边栏菜单屏幕截图

发布日期 作者

这是第一个(希望有更多)屏幕截图,它将提供一个简单的 jQuery 演示的快速教程。我计划根据我最近的演讲至少再做 2-3 个——希望我能在接下来的一周(或几周)内陆续发布。(哦,如果我听起来很累,请见谅——因为我确实很累。)请享受!



jQuery 演示 - 可扩展侧边栏菜单Vimeo

或者:观看 原始(.mov,3.85 MB)视频。(我猜想这个版本要清晰得多——但并非所有人都支持 Quicktime 文件)

文件下载

27 则关于 "可扩展侧边栏菜单屏幕截图" 的评论

  1. 看起来不错!我期待着更多这样的内容。

    顺便说一句,这种类型的菜单通常被称为“手风琴菜单”,而不是“可扩展侧边栏菜单”。为了让你的屏幕截图更引人注目,我建议使用这种设计模式的通用名称。;)

  2. @Jason: 注意到了 ;-)

    @Matt: 哎,是的——手风琴菜单。凌晨 3:30 时,一切都变成了“可扩展侧边栏菜单”。

    @Erin: 我使用的是 Mac 上的 Subethaedit(试试 免费版)。它具有实时协作编辑功能和实时网页预览功能。我非常喜欢它!

  3. 很棒的屏幕截图!我期待着更多这样的内容。我想看看关于 ajax 功能以及 jQuery 表单用法的屏幕截图。

    谢谢,
    Rich

  4. Joel Birch 说:

    这太棒了,John。我认为这些屏幕截图会真正帮助许多人打开 jQuery 的启蒙之门。我认识的那些网页设计师中有一两个不是脚本编写者,他们可能觉得实现如此看似复杂的效应超出了他们的能力。我知道,当他们看到这个屏幕截图时,这将是对他们的一种顿悟。

  5. Pingback: John Resig 的第一个 jQuery 屏幕截图 - 在“代码即一切,然后有了 AJAX!”

  6. Grant Holman 说:

    很棒的演示,John。这样的东西真的帮助像我这样的普通人“理解”jquery。

    简单的问题:如果 DD 块已经展开,是否可以阻止它向上滑动然后向下滑动?

    干杯
    Grant

  7. 嗨,Grant,

    你可以保存对菜单当前活动部分的引用,并参考该引用来防止你提到的情况。

    如果你需要这个功能,或者可能需要更多功能,可以看看我的 .

  8. Pingback: Weblogger.ch » jQuery: 链接

  9. 为了确保当前打开的 dd 块不会上下滑动,你也可以检查它是否打开,然后不做任何操作。

    如果它已打开,那么 $(this).parent().next() 将可见。
    所以你可以将整个内容包装在

    if(!$(this).parent().next().visible()){
    //执行酷炫操作
    }

    **注意 – 我是 jQuery 新手,不确定 .visible() 是否是它可以返回的属性..(John?)**

  10. Gary Sinise 说:

    这太棒了,我在看到这个屏幕截图之前阅读了很多文档,只是有点理解如何实现这样的东西,看到屏幕截图让它变得完全清晰。非常感谢!捐赠按钮在哪里? ;-)

  11. 您好,您的手风琴菜单很棒,祝贺您;)。我想知道,它是什么类型的许可证?我看不到任何。谢谢!

  12. 有人可以帮助我使用 cookie(记住状态)扩展此脚本的功能 + 一些开关以默认情况下使预定义的选项卡折叠/展开吗?

    我想拥有与这个网站的菜单类似的功能:http://miejsca.org/

    如果需要,我愿意付费,然后与大家分享代码,请通过 mikolaj-i [at] o2 . pl 给我发邮件。

  13. 稍微离题,抱歉,但你在这个屏幕截图中使用什么程序或应用程序来编辑文件?我是一个 PC 用户,因为受够了花时间处理操作系统,所以要“跳槽”到 mac…

    谢谢 John,也许还有其他可能回答我问题的人。