jQuery Grid Test Bed

Testing out various layout features using the grid (e.g. making the cells of a row have equal height; removing an entire column from the grid).

by emgee

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<div data-role="content" data-theme="e">
    <div class="ui-grid-b" id="ww-compare-grid">
        <span class="ww-row">
            <div class="ui-block-a">
                Voice & Data 63
            </div>
            <div class="ui-block-b">
                Voice & Data 55 - 100MB/200MB
            </div>
            <div class="ui-block-c">
                Voice & Data Lite 55+ for Smartphones
            </div>   
        </span>
        <span class="ww-row">
            <div class="ui-block-a">
                $63.00
            </div>
            <div class="ui-block-b">
                $55.00
            </div>
            <div class="ui-block-c">
                $55.00 - $85.00<br/>
                Base: $55.00<br/>
                Tier 1: $65.00<br/>
                Tier 2: $75.00<br/>
                Tier 3: $85.00<br/>
            </div>
        </span>
        <span class="ww-row">
            <div class="ui-block-a">
                $63.00
            </div>
            <div class="ui-block-b">
                $55.00 - $75.00<br/>
                Base: $55.00<br/>
                Tier 1: $65.00<br/>
                Tier 2: $75.00<br/>
            </div>
            <div class="ui-block-c">
                $55.00<br/>
            </div>
        </span>
    </div>
    <button id="btnHide" data-theme="b" data-inline="true" data-mini="true">Hide Column 2</button>
</div>

CSS

#ww-compare-grid {font-family: arial; font-size: 10pt; font-weight: normal; }
.oddCell { border-left: 1px dashed grey; border-right: 1px dashed grey; }

div[class*="ui-block"] { border-bottom: 1px solid #696969; padding:5px 10px 5px 10px; }


#ww-compare-grid {font-family: arial; font-size: 10pt; font-weight: normal; }
.oddCell { border-left: 1px dashed grey; border-right: 1px dashed grey; }

div[class*="ui-block"] { border-bottom: 1px solid #696969; padding:5px 10px 5px 10px; }

JavaScript

$(document).ready(function(){
$('#ww-compare-grid > span[class=ww-row]').each(function(){AdjustCellHeights($(this))});
});

    $('.ui-block-b, .ui-block-d').addClass("oddCell");

// on hiding a column we'll need to update cell styling for proper col/row borders
$("#btnHide").click(function(){$('.ui-block-b').hide("fade")});

/*
Because the grids are built using div tags we need to run Javascript to make all the cells of a given row have the same height (that of the tallest cell in the row). For displaying information in a tabular manner, I have no issue using actual tables. If you're building a grid of rows and columns and then adding JavaScript to make it all look nice, just use a table.  ;-) Also if JavaScript is disabled the grid will look like crap, whereas a <table> will render properly without JavaScript.
*/

function AdjustCellHeights(row)
{
   var tallest = 0;
   row.children().each(function(){
       var cellHeight = $(this).height();
       if ( cellHeight > tallest ){
           tallest = cellHeight;}
   });
   row.children().height(tallest);
}

/*
    $("#ww-compare-grid div[class*=ui-block]").filter(":odd").addClass("oddCell");

    var tallest = 0;
    $('.ui-grid-b > div[class*=ww-row2]').each(function() {
    var thisHeight = $(this).height();
    if (thisHeight > tallest) {
        tallest = thisHeight;
    }
    $("div[class*=ww-row2").height(tallest);})
*/