gpt4 book ai didi

jQuery - 气泡对话布局

转载 作者:行者123 更新时间:2023-12-01 00:41:46 24 4
gpt4 key购买 nike

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

alt text

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

我正在寻找一个实现此布局结构(或类似的布局结构)的 jQuery 插件。该插件应支持至少 2 到 3 名参与者,但如果有更多参与者的选项就更好了。

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

谢谢!

最佳答案

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

编辑:我创建了一个 updated example它使用 jQuery 动态计算对话中的人数并适当设置边距。我将其编写为一个函数,以便您可以在以后的某个事件(当有新人加入对话时)调用该函数来自动调整大小。

我尝试使用GlobalStylesheet Plug-in让它更干净地工作,但要么该插件不适用于 1.4.x,要么不适用于 JSFiddle,或者我使用不当。因此,这使用了显式设置/更新每个元素样式的“标准”jQuery 实践。

哦,我将 block 引用移至标准 HTML4 cite元素,以便您可以使用旧版 IE 对其进行样式设置。 :p

关于jQuery - 气泡对话布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4360926/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com