Javascript中的GUI项和元素

Question

我如何制作类似于论文的盒子？我想在右上方有一个X. 它左侧的文本和黑色区域所在图像下方的文本.当我点击X时它将删除这些并且右侧的框移动并​​取而代之.我怎么能用jquery创建它？有什么样的GUI和容器我可以使用它来自动移动盒子,当我关闭/删除它们等等替代文本http://i47.tinypic.com/29wpj5f.jpg

Answer 1

如果你不想要任何花哨的动画效果与滑动等,它实际上只是一个小CSS:

<style>
    .itembox {float:left;}
</style>

如果所有盒子的宽度均匀地装入容器(例如,它们各自为100px,容器宽度为300px),那么它们将彼此相邻堆叠,直到它们到达容器的边界,然后再向左包裹并再次堆叠.

<div class="itembox"> <a href="#" class="close">x</a> ... </div>
<div class="itembox"> <a href="#" class="close">x</a> ... </div>
<div class="itembox"> <a href="#" class="close">x</a> ... </div>

设置display:none将从文档流中删除该文件并将其隐藏,因此它之后将折叠回来.在JavaScript中,在关闭按钮的单击事件上,将相应的itembox的显示设置为none:

$('.itembox .close').click(function() {
    $(this).parent('.itembox').hide();
});

在jQuery中,hide()设置display:none.