Dynamiaclly追加到网格行

Question

我试图修改网格布局，以便如果用户单击一个网格行，另一个网格行将附加到所选网格行并显示有关所选网格的额外信息。这是可能使用jQuery移动？

<div class="ui-grid-a"> 
     <div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:20px">A</div>  
    </div> 

Answer 1

这不是全功能的，但我希望这会给你一个想法，活生生的例子：http://jsfiddle.net/F6Zdp/44/

HTML：

<div data-role="page" id="gridplus"> 
    <div data-role="content"> 
     <div class="ui-grid-a" id="currentgrid"> 
      <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div> 
     </div> 
     <br /> 
     <input type="button" id="addcolumn" name="addcolumn" value="Add Column"/> 
     <input type="button" id="removecolumn" name="removecolumn" value="Remove Column"/> 
    </div> 
</div> 

JS：

var currentGrid = $('#currentgrid'); 
var previousGrid; 

$('#addcolumn').click(function() { 
    grid = currentGrid.attr('class'); 
    previousGrid = grid; 
    nextGrid = grid.substring(0,grid.length-1)+String.fromCharCode(grid.charCodeAt(grid.length-1)+1); 

    $('#currentgrid').removeClass(grid).addClass(nextGrid); 
    $("#currentgrid").children().each(function() { 
     c = $(this); 
     block = c.attr('class'); 
     nextBlock = block.substring(0,block.length-1)+String.fromCharCode(block.charCodeAt(block.length-1)+1); 

     if($('.'+nextBlock).length) { 
      doNothing = true; 
     } else { 
      c.after('<div class="'+nextBlock+'"><div class="ui-bar ui-bar-e" style="height:50px">I\'m a Block and text inside will wrap.</div></div>'); 
     } 
    }); 
}); 

$('#removecolumn').click(function() { 
    grid = currentGrid.attr('class'); 
    $('#currentgrid').removeClass(grid).addClass(previousGrid); 
    $("#currentgrid").children().last().remove(); 
}).page(); 

Answer 2

使用可折叠的内容 - http://jquerymobile.com/demos/1.0a4.1/docs/content/content-collapsible.html

内容可以是一个jQuery网格我想。