Question

我试图修改网格布局，以便在用户单击网格行时，另一个网格行将附加到选定的网格行，并显示有关所选网格的额外信息。这是否可以使用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>

Answer 1

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

我认为内容可以是jQuery网格。

Answer 2

它没有完全发挥作用，但我希望这会给你一个想法，实例：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();

动态附加到网格行

2 个答案: