动态添加到网格行

问题描述

我试图修改网格布局，以便如果用户单击一个网格行，则另一个网格行会附加到所选网格行上，并显示有关所选网格的其他信息。使用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网格。