0

在此处输入图像描述

我希望该用户可以在容器“您的文本”中写入文本，然后按添加。然后将在大容器（红线）中创建用户提供信息的新容器。我可以这样做，但是如果我希望一层有 2 个帖子怎么办？

如果有楼层有 2 个帖子并且用户添加了新帖子，则整个楼层会向下移动，新帖子进来并位于最新楼层的左侧。然后如果用户添加另一个，它将被放置在最新的楼层右侧。这就是逻辑。等等。

我不需要完整的代码，也许一些教程或只是想法如何做到这一点，因为我可以
只添加 1 个帖子，然后在 1 层将是 1 个帖子，类似于“TODO”应用程序。但是如果我想要 2 件东西在 1 楼怎么办？也许有一些jquery插件？

根据要求，这是应该如何发生的图片

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

谢谢 ！

4

3 回答 3

2

每一层都可以是一对大红色<div>的坐在里面。<li><ul>

您需要创建一个充当“指针”的变量，该指针确定楼层和楼层中的位置：

floor: 0, position: [0,1]（0 表示楼层是空的，1 表示楼层是半满的）

<li>当楼层增加时可以插入新的，<div>当位置为 0 或 1 时可以添加 s。

当位置大于一时，下一级。

我希望这是有道理的！

于 2013-11-13T13:41:37.147 回答
1

因为您没有提到您的网站或应用程序的外观以及它的作用，所以我认为与您要实现的目标不完全相同。如果您的动机只是填充容器，那么第一行中的空白空间看起来并不好（作为最终用户的观点）。如果我使用这样的用户界面，那么我会期待这样的事情：-

                 _____
text1           [_____]
                  add

.

                 _______
text2 | text1   [_______]
                  add

.

                 _______
text3 | text2   [_______]     
------|------     add
text1 |

.

                 ______
text4 | text3   [______]
------|------     add
text2 | text1

这是我创建的东西。我希望这对我想说的有意义

全屏演示

代码

以上演示支持：

1.从容器中取出一个盒子，

2.根据容器id中的顺序移除和添加一个盒子，例如最近添加的盒子将有idbox1

尝试使用连续数字(1,2,3..)或工作日(sunday,monday..)等

注意：-我只测试了代码。使用opera的chrome脚本并不像看起来那么复杂，但css包含一些必要的部分，如果你想遵循相同的 html 结构，这些部分带有（下面）它们的注释

于 2013-11-14T21:22:31.190 回答
1

prepend()如果顶行已满，可以使用 jQuery添加新行，如果没有，则将文本添加到第二个项目。

HTML

<div style="padding:30px"><input/><button>Add</button></div>
<div id="content"> </div>

JS

/* second item in new row has empty class, used to determine if need to add row or not */
function newRow(txt){
   var row='<div class="row">';
    row+='<div class="item"><div class="item_text">'+txt+'</div></div>';
    row+='<div class="item"><div class="item_text empty">&nbsp;</div></div>'; 
    row+='<div style="clear:both"></div></div>';
 return row
}

$('button').click(function(){
    var txt=$('input').val(), $cont=$('#content');
    if( txt=='') return;
    var $emptyItem=$cont.find('.row:first .empty')
    if($emptyItem.length){
      $emptyItem.text(txt).removeClass('empty');  
    }else{
       $cont.prepend( newRow(txt) ); 
    }   

})

DEMO

于 2013-11-13T14:43:14.483 回答