当前位置： 文江博客话题详情

如何使用 jQuery 实现类似 GMail 的选项卡式/装饰式界面？

发布于 2024-12-02 13:17:57 字数 510 浏览 0 评论 0原文

我正在尝试使用 jQuery 创建一个类似于下面显示的右侧的界面——带有页眉（主题）和页脚的选项卡式/装饰式消息。 在此处输入图像描述

有人做过什么吗与 jQuery 类似或者可以建议解决问题的方向吗？我在网上搜索了一段时间，但没有找到足够接近的解决方案。我遇到了“30 jQuery 选项卡教程”，但没有找到我正在寻找什么。

预先感谢您的帮助。如果我可以提供有关我正在寻找的内容的更多详细信息，请告诉我。

原文

I'm trying to create an interface that's like the right-hand side of what's shown below with jQuery -- tabbed/decked messages with header(subject) and footer.
enter image description here

Has anyone done something similar with jQuery or can suggest a direction to approach the problem? I've searched on the Web for a while but haven't found a solution that's close enough. I ran across the "30 jQuery tabs tutorial" but didn't find what I am looking for either.

Thanks in advance for your help. Let me know if I can provide more details on what I'm looking for.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

千笙结 2024-12-09 13:17:57

基本的丑陋想法：

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function(){
    $('.thread .head').click(function() {
    $(this).next().slideToggle("fast");
    return false;
    }).next().hide();
    }); 
</script
<meta charset=utf-8 />
<title>basic Idea</title>

<style>
  .thread { width: 300px; border: 1px soildl; }
  .thread h2{ background-color: #CCC; margin: 0; border: 1px solid #FFC;}
  .thread div{ background-color:#FDF; border: 1px solid #000;}
</style>
</head>
<body>
  <div class="thread">
    <h2 class="head">The information here</h2>
    <div>
       blah blah blah blah
    </div>
    <h2 class="head">come other information here</h2>
    <div>
       blah blah blah blah Goo Goo Goo
    </div>
    <h2 class="head">hee hee hee</h2>
    <div>
       ho ho ho ho ho
    </div>    
  </div>
</body>
</html>

JSBIN

Basic ugly idea:

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function(){
    $('.thread .head').click(function() {
    $(this).next().slideToggle("fast");
    return false;
    }).next().hide();
    }); 
</script
<meta charset=utf-8 />
<title>basic Idea</title>

<style>
  .thread { width: 300px; border: 1px soildl; }
  .thread h2{ background-color: #CCC; margin: 0; border: 1px solid #FFC;}
  .thread div{ background-color:#FDF; border: 1px solid #000;}
</style>
</head>
<body>
  <div class="thread">
    <h2 class="head">The information here</h2>
    <div>
       blah blah blah blah
    </div>
    <h2 class="head">come other information here</h2>
    <div>
       blah blah blah blah Goo Goo Goo
    </div>
    <h2 class="head">hee hee hee</h2>
    <div>
       ho ho ho ho ho
    </div>    
  </div>
</body>
</html>

JSBIN

回复 原文
樱花坊 2024-12-09 13:17:57

您正在寻找创建一个手风琴。

我强烈推荐 jQuery 工具 - http://flowplayer.org/tools/demos/tabs/accordion .html

You are looking to create an accordion.

I highly recommend jQuery Tools - http://flowplayer.org/tools/demos/tabs/accordion.html

回复 原文
~没有更多了~

关于作者

山田美奈子

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文