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

解决方案取决于您如何显示这些卡片，因为我从您的代码中假设这些卡片是浮动的或具有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

最简单的方法可能是找到位于您单击的项目之后最右侧的项目，因为它将位于当前行的末尾，您可以在此之后移动详细信息。这也意味着您不需要每行设置一定数量的卡片，因此可以使用不同的屏幕尺寸。

您可以使用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

在这里假设您可以使用 JQuery。

工作示例： http: //jsfiddle.net/UgBmf/2/（点击方框了解详情）

要知道在哪里插入细节，我们首先需要知道被点击的 li

event.target给了我们在我的代码中点击的 li。（因为我将点击处理程序添加到 ul 而不是将其添加到每个 li）

.index()返回我们当前 li 在所有 LI 列表中的索引。（从零开始的位置）参考：http ://api.jquery.com/index/

如果numOfLIsInARow是一行中 LI 的数量，则index - (index % numOfLIsInARow) + numOfLIsInARow - 1返回需要添加细节 LI/DIV 的 LI 的位置。您可以使用方法获取 LI .get()。

于 2013-01-13T13:04:50.637 回答
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 回答