jQuery - 泡泡对话布局

Question

我需要在某个网站上实现以下布局结构：

正如您所看到的，在此对话中有3位参与者。参与者说的每一行都在泡沫中。每个参与者都有不同的颜色。参与者的所有气泡与左侧的距离相同。

我正在寻找一个实现这种布局结构的jQuery插件（或类似的布局结构）。这个插件应该支持至少2个和3个参与者，但更多的选项将是伟大的。

如果不存在此类插件，我该如何实现？我的意思是，我如何计算每个气泡的宽度（取决于参与者的数量）和每个气泡的左边距？

谢谢！

Answer 1

我使用边距和圆角创建了a simple HTML and CSS example，并使用了合理的语义标记。

修改：我创建了一个updated example，它使用jQuery动态计算对话中有多少人并适当设置边距。我把它写成一个函数，以便你可以在稍后的事件（当一个新人加入对话时）调用该函数来自动调整大小。

我尝试使用GlobalStylesheet Plug-in更干净地使用它，但是该插件不适用于1.4.x，或者它不适用于JSFiddle，或者我使用它不正确。因此，这使用了“标准”jQuery实践，即明确设置/更新每个元素的样式。

哦，我将blockquote引用移动到标准的HTML4 cite元素中，以便您可以使用旧的IE设置样式。 ：P

Answer 2

为什么不做这样的事情：

http://www.jsfiddle.net/NBHBD/1/

为每个类分配一个类，每次生成它时，只需指定该类。

这是你的意思吗？

编辑：如果你想用jquery做，也许你可以使用class selector

编辑2：也许你也可以改编这个插件，它是跨浏览器！

Answer 3

这是一个实现：

XHTML：

<dl>
    <dt class="participantOne">Participant One</dt>
    <dd class="participantOne">This is something from the first particpant.</dd>

    <dt class="participantTwo">Participant Two</dt>
    <dd class="participantTwo">Lorem ipsum</dd>
    <dd class="participantTwo">dolor sit amet. And so forth.</dd>

    <dt class="participantThree">Participant Three</dt>
    <dd class="participantThree">Something or other</dd>

    <dt class="participantOne">Participant One</dt>
    <dd class="participantOne">Yadda yadda.</dd>

    <dt class="participantThree">Participant Three</dt>
    <dd class="participantThree">Blah? With other text...</dd>
</dl>

的CSS：

dt,
dd {
    border: 1px solid #000;
}
dt {
    border-bottom: 1px dashed #000;
    margin: 0.5em 0 0 0;
    border-radius: 1em 1em 0 0;
    padding: 0.5em 0 0 0.5em;
    box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px rgba(255,255,255,0.5), 0 1px 1px rgba(255,255,255,0.5);
    -o-box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px rgba(255,255,255,0.5), 0 1px 1px rgba(255,255,255,0.5);
    -webkit-box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px rgba(255,255,255,0.5), 0 1px 1px rgba(255,255,255,0.5);
    -moz-box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px yellow, 0 1px 1px rgba(255,255,255,0.5);
}

dt:after {
    content: " says: ";
}

dd {
    border-top: none;
    padding: 0 0.5em;
}

dd + dd {
    margin-top: -1px;
    border-top-width: 1px;
    border-top-style: dashed;
}

.participantOne {
    margin-left: 0;
    background-color: #f00;
}

.participantTwo {
    margin-left: 1em;
    background-color: #0f0;
}
.participantThree {
    margin-left: 2em;
    background-color: #00f;
}

JS Fiddle demo