在我的应用程序中,我将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)
发布于 2013-01-13 21:04:51
这里假设您可以使用JQuery。
工作示例:http://jsfiddle.net/UgBmf/2/ (单击方框查看详细信息)
要知道在哪里插入详细信息,我们首先需要知道所单击的li
event.target
为我们提供了在我的代码中单击的li。(因为我将click处理程序添加到ul中,而不是添加到每个li中)
.index()
返回当前li在所有li列表中的索引。(基数为零的位置)参考:http://api.jquery.com/index/
如果numOfLIsInARow
是一行中LI的数量,则index - (index % numOfLIsInARow) + numOfLIsInARow - 1
返回LI的位置,在该位置之后需要添加细节LI/DIV。您可以使用.get()
方法获取LI。
发布于 2013-01-05 12:50:03
我猜你已经有jQuery了。将click事件处理程序附加到每个li元素。当click事件被激发时,事件对象将具有有关单击来源的详细信息。
$(document).ready(function(){
$('li').each(function(index, element){
$(element).click(function(event){
$('#text').text($(event.target).html());
});
});
});
看看这个code snippet。单击右侧窗格中的数字,您将看到您单击的数字显示在下面的标签中。
发布于 2013-01-09 03:22:50
解决方案取决于您如何显示这些卡片,因为我从您的代码中推断出这些卡片要么浮动,要么设置了display:inline-block
属性。如果是这种情况,那么您可以尝试以下算法来确定插入卡的描述的位置:
这个想法是将卡片推到选定的卡片下面,为此,你应该在一行中的最后一张卡片之后插入一个新的元素(也是浮动的或带有内联块的),这个元素应该有卡片容器的宽度,以获取整行并将下面的卡片推入其中。现在你需要做的就是决定在哪张卡片之后插入这个"pusher- element ":假设所有的卡片都有相同的宽度,可以计算出你有多少列,然后得到被点击的卡片的索引,得到它的列,并在这个元素所在行的最后一张卡片之后插入"pusher“。
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)
我还没有测试过这段代码,但是您可能已经明白了
更新:下面是http://jsfiddle.net/azgSX/1/的工作示例
https://stackoverflow.com/questions/14168482
复制相似问题