如何解决动态添加到网格行
我试图修改网格布局,以便如果用户单击一个网格行,则另一个网格行会附加到所选网格行上,并显示有关所选网格的其他信息。使用jQuery mobile可以吗? <div class=\"ui-grid-a\">
<div class=\"ui-block-a\"><div class=\"ui-bar ui-bar-b\" style=\"height:20px\">A</div>
</div>
解决方法
它的功能尚不完善,但我希望这能给您一个启发,例如Live Example: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();
,使用可折叠的内容-http://jquerymobile.com/demos/1.0a4.1/docs/content/content-collapsible.html
我认为内容可以是jQuery网格。