jQuery - 泡泡对话布局

Question

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

如您所见,在此对话中有3个参与者.参与者说的每一行都在泡沫中.每个参与者都有不同的颜色.参与者的所有气泡与左侧的距离相同.

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

如果不存在这样的插件,我该如何实现呢？我的意思是,我如何计算每个气泡的宽度(取决于参与者数量)和每个气泡的左边距？

谢谢!

Answer 1

我使用边距和圆角创建了一个简单的HTML和CSS示例,并使用了合理的语义标记.

编辑:我创建了一个更新的示例,它使用jQuery动态计算对话中有多少人并适当地设置边距.我把它写成一个函数,这样你就可以在稍后的某个事件(当一个新人加入对话时)调用该函数来自动调整大小.

我尝试使用GlobalStylesheet插件更干净地工作,但是该插件不适用于1.4.x,或者它不能与JSFiddle一起使用,或者我使用它不正确.因此,这使用了"标准"jQuery实践,即明确设置/更新每个元素的样式.

哦,我将blockquote引用移动到标准的HTML4 cite元素中,以便您可以使用旧的IE设置它.:p