0

ここに画像の説明を入力

ユーザーがコンテナ「your text」にテキストを書き込んで追加できるようにしたい。次に、大きなコンテナー (赤い線) にユーザーが提供した情報を含む新しいコンテナーが作成されます。できますが、1 つのフロアに 2 つの支柱が必要な場合はどうすればよいですか?

2 つの投稿があるフロアがあり、ユーザーが新しい投稿を追加すると、フロア全体が下に移動し、新しい投稿が入って、最新のフロアの左側に配置されます。ユーザーが別のフロアを追加すると、新しいフロアの右側に配置されます。それが論理です。等々。

完全なコードは必要ありません。おそらく、これを行う方法のチュートリアルまたは単なるアイデアが必要です。これは、
投稿を 1 つだけ追加でき、1 階に 1 つの投稿があり、「TODO」アプリに似たものになるためです。でも、1フロアに2つ欲しい場合はどうすればいいですか？多分いくつかのjqueryプラグインがありますか？

リクエストに応じて、これがどのように起こるかの写真です

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

ありがとう ！

4

3 に答える 3

2

各フロアは、大きな赤<div>の内側に座っているペアの可能性があります。<li><ul>

「ポインター」として機能する変数を作成する必要があります。このポインターは、床のレベルと床の位置を決定します。

floor: 0, position: [0,1](0 はフロアが空であることを意味し、1 はフロアが半分埋まっていることを意味します)

<li>フロアがインクリメントするときに新しいを挿入でき<div>、位置が 0 または 1 のときに s を追加できます。

位置が 1 より大きい場合、レベルを下げます。

これが理にかなっていることを願っています！

于 2013-11-13T13:41:37.147 に答える
1

一番上の行がいっぱいの場合はjQueryを使用prepend()して新しい行を追加し、そうでない場合は2番目の項目にテキストを追加することでこれを行うことができます。

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 に答える
1

あなたのウェブサイトやアプリケーションがどのように見えるか、そしてそれが何をするかについて言及していないので、私が思うことはあなたが達成しようとしていることとまったく同じではありません. 目的がコンテナーにデータを入力することだけである場合、最初の行の空白スペースは (エンド ユーザーの観点から) 見栄えがよくありません。そのようなUIを使用している場合、次のようなものを期待します:-

                 _____
text1           [_____]
                  add

.

                 _______
text2 | text1   [_______]
                  add

.

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

.

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

ここに私が作成したものがあります。私が言おうとしていることについて、これが意味をなすことを願っています

フルスクリーンデモ

コード

上記のデモは以下をサポートしています:

1.コンテナから箱を取り出し、

2.id最近追加されたボックスなど、コンテナ内の順序に従ってボックスを削除および追加する際にボックスに割り当てます。box1

(1,2,3..)連続した数字や曜日(sunday,monday..)などで遊んでみてください

注:-コードのみをテストしました。使用されoperaてchromeいるスクリプトは、見た目ほど複雑ではありませんがcss、同じ html 構造に従いたい場合に必要ないくつかの部分が含まれています。これらの部分には (下に) コメントがあります。

于 2013-11-14T21:22:31.190 に答える