3

私のアプリでは、divのリスト（html）を親のdivコンテナーに追加しています

muse_card_template = $("#mustache.muse_card").html()
html = Mustache.to_html(muse_card_template, muse.getMustacheJSON())

html = "<li class=''>" + html + "</li>"
@$('.muses_card_container').append (html)

ここに画像の説明を入力してください

//div to which I append my cards
.content
  %ul.muses_card_container

つまり、基本的には、divのリストをdivに追加し、コンテナーの幅を設定してラップするだけです。

クリックした後、カードの詳細な内容を展開するつもりです。展開されたビューは、クリックされたカードのすぐ下に表示されます（下のインライン展開）。

ただし、現在、divのリストしかないため、展開されたコンテンツを挿入する場所についての参照はありません。

新しいdivを挿入する位置を特定するために使用できるライブラリはありますか？または、これを機能させるためにできるコード変更はありますか？

編集：

期待される結果を追加

ここに画像の説明を入力してください

これを行う際の課題は、ユーザーが画像をクリックしたときに展開されたコンテンツをどこに挿入するかがわからないことです。

HTML画像カードをループするための私のコードは次のとおりです。

addAll: ->
  @options.muses.each(@addOne)

addOne: (muse) ->
  #render corresponding muse cards
  muse_card_template = $("#mustache.muse_card").html()

  #html for cards are rendered via Mustach
  html = Mustache.to_html(muse_card_template, muse.getMustacheJSON())

  #append resulting html to 'muse_card_container' div
  html = "<li class=''>" + html + "</li>"
  @$('.muses_card_container').append (html)
4

5 に答える 5

4

すでにjQueryをお持ちだと思います。クリックイベントハンドラーを各li要素にアタッチします。クリックイベントが発生すると、イベントオブジェクトには、クリックが発生した場所に関する詳細が含まれます。

$(document).ready(function(){
  $('li').each(function(index, element){    
    $(element).click(function(event){     
      $('#text').text($(event.target).html());
    });
  });
});

このコードスニペットを見てください。右側のペインの番号をクリックすると、クリックした番号が下のラベルに表示されます。

于 2013-01-05T04:50:02.590 に答える
2

HTML5データ属性（レンダリングエンジンでは無視されます）を次のように使用できます。

<div id="mustache" class="muse_card" data-row="2" data-bottom="false"></div>

と

$("#mustache.muse_card").click(function(){
    if(this.get()[0].getAttribute('data-bottom'])){ // only insert the content on top if it is in the bottom row. 
        // Do something to insert the content in between this.get()[0].getAttribute('data-row') (in this case 2) and this.get()[0].getAttribute('data-row') +- (in this case 1)
    }else{ // This is not in the top row.
        // Do something to insert the content in between this.get()[0].getAttribute('data-row') (in this case 2) and this.get()[0].getAttribute('data-row') +1 (in this case 3)
    }
})
于 2013-01-14T03:31:51.620 に答える
2

クリックしたアイテムの右端にあるアイテムを見つけるのがおそらく最も簡単です。これは、現在の行の最後にあり、その後で詳細を移動できるためです。これは、行ごとにカードの数を設定する必要がないため、さまざまな画面サイズで機能することも意味します。

offsetLeftを使用して位置を確認し、next（）を使用してアイテムをループし、detach（） / insertAfter（）を使用して展開された詳細要素を移動できます。

コアコード

// Note: 'this' is the card which got clicked

// find next right-most li by looping the items after this one
var leftPos = this.offsetLeft;
var rightMost = $(this);

while (true) {
  // get the next li
  var nextLi = rightMost.next();
  if (nextLi.length == 0 || nextLi[0].offsetLeft <= leftPos) {
    // if we have reached the end one or the next li is farther left, we are at the end of the row
    break;
  } else {
    // nextLi is currently the furthest right
    rightMost = nextLi;
  }
}

// move details from its current place to after the end of the row
var detailsLi = $('#details');
detailsLi.detach();
detailsLi.insertAfter(rightMost);

http://jsfiddle.net/7dGfg/2/の基本的な作業例これは、Alexanderのサンプルに従ってLIを使用しますが、各カードが同じサイズである限り、同じ原則がdivにも適用されます。

于 2013-01-12T15:57:17.927 に答える
2

解決策は、これらのカードをどのように表示するかによって異なります。コードから、これらのカードが浮動しているか、display:inline-blockプロパティが設定されていると想定しているためです。この場合、次のアルゴリズムを試して、カードの説明を挿入する場所を決定してください。

アイデアは、選択したカードの下にカードをプッシュすることです。これを行うには、行の最後のカードの後に​​新しい要素 (フロートまたはインライン ブロックも含む) を挿入する必要があります。この要素は、カードのコンテナーの幅を取る必要があります。その下にカードを押し込みます。必要なのは、この「プッシャー要素」を挿入するカードの後に​​決定することだけです。すべてのカードの幅が同じであれば、列の数を計算して、クリックされたカードのインデックスを取得することができます。この要素の行の最後のカードの後に​​「プッシャー」を挿入します。

elementsInColumn = 4 # you should calculate it based on cards and container width 
$('.muses_card_container li').click ->
    index = $('.muses_card_container li').index(this)
    indexInColumn = index % elementsInColumn # get card index in column (0..elementsInColumn-1)
    lastCardInColumnIndex = index + (elementsInColumn - indexInColumn) #
    lastCardInColumn = $('.muses_card_container li').get(lastCardInColumnIndex)
    $(expandedContentHTML).insertAfter(lastCardInColumn)

私はこのコードをテストしていませんが、あなたはアイデアを持っているかもしれません

UPD: ここに実例がありますhttp://jsfiddle.net/azgSX/1/

于 2013-01-08T19:22:49.693 に答える
2

ここでは、JQuery を使用できると仮定します。

作業例: http://jsfiddle.net/UgBmf/2/ (詳細については、ボックスをクリックしてください)

詳細を挿入する場所を知るには、まずクリックされたliを知る必要があります

event.target私のコードでクリックされたliが表示されます。（クリックハンドラを各liに追加するのではなく、ulに追加したため）

.index()すべての LI のリスト内の現在の Li のインデックスを返します。(ゼロベースの位置) 参照: http://api.jquery.com/index/

numOfLIsInARowが行内の LI の数である場合index - (index % numOfLIsInARow) + numOfLIsInARow - 1、詳細 LI/DIV を追加する必要がある LI の位置を返します。.get()メソッドを使用して LI を取得できます。

于 2013-01-13T13:04:50.637 に答える