jquery - 使用 jquery 和 css 生成标签

Question

我正在尝试制作类似于 GMail 或 Facebook 聊天窗口底部的栏。 我并不想提供聊天服务或类似服务。

在 facebook 的聊天中，当你点击一个 friend 时，一个长方形的东西会在可见页面的底部形成，上面有你 friend 的名字和聊天记录。

我想知道你是否可以做到这样，如果你有一个列表，你可以单击其中的每一个并生成带有你在页面底部单击的内容的相应信息的选项卡？

我是否必须首先为每个标签生成标签，然后设置显示:无，然后当我想生成标签时，使用[请原谅下面糟糕的语法]

$(##tab attribute##).click(function {
        ##selected tab##.show()
     }
 )

Answer 1

如果我没理解错的话...您不必创建选项卡，因为您可以即时创建它们。看看这个jsfiddle用于简单的实现。

编辑

按照 AlienWebguy 的建议更新细节:

首先，创建有序的链接列表和标签容器。每个链接都有一个唯一的 ID:

html:

<!-- links to contacts or whatever -->
<ul id="chat-links">
    <li><a id="foo" href="#">foo</a></li>
    <li><a id="bar" href="#">bar</a></li>
    <li><a id="baz" href="#">baz</a></li>
</ul>

<!-- container for your tabs -->
<div id="chat-stage"></div>

然后，为每个链接创建一个点击事件。每个点击事件都会在“聊天窗口”div 中创建一条个性化消息:

jQuery:

// click event
$('#chat-links a').click(function() {
    // personalised message
    var str = "Hi, " + this.id + ", what's up?";
    // append a new div to your tab container
    $('#chat-stage').append('<div class="chat-window">' + str + '</div>');
});

然后为元素设置样式:

CSS:

#chat-stage
{
    position: absolute;
    bottom: 0px;  
}

.chat-window
{
    border: 1px solid #ccc;
    height: 100px;
    float: left;
    margin-right: 8px;
    padding: 8px;
    width: 100px;  
}

正如我所提到的，这是一个非常简单的实现。例如，这将允许您多次单击同一个链接并为每个单击事件打开一个新选项卡。您可以修改点击事件来处理这个问题；例如:为每个 div 生成一个 id 并执行条件。打开新选项卡时，您可能还想最小化或删除其他选项卡。同样，您的实现取决于您想要做什么；在后一种情况下，您可以将 $('#chat-stage').empty(); 添加到点击事件的第一行。

希望这有帮助:)