Content Box

As part of a new UI library, I have created a Content Box feature using the jQuery UI Widget Style in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Content Box supports the following features:

• Allows for an easier visual seperation of information on a page.
• Header with title and action link.
• Uniform styling, padding, etc.
• Flexible layout options.
• "Equal Height" feature, which can be used on any element and not just the Content Box.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Simple Implementation

The Demo

The Markup

Just some basic page elements (<div>, <h1-h6>, <a>, etc.), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Content Box by simply setting the top-level wrapping element of the Content Box markup with the class attribute to "contentBox", add a child header tag, and setting the desired optional custom data attributes. The custom data attributes are optional, so the Content Box could simple have only the standard markup plus the class attribute.

That sounds like a DRY solution to me (see UI Manifesto).

 
<div class="contentBox"
    data-flow="left"
    data-pad="right"
    data-width="191"
    data-equalHeightGroup="ehg1">
    <header><h2>Website Settings</h2><a>Edit</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo.
</div>
<div class="contentBox"
    data-flow="left"
    data-pad="right"
    data-width="191"
    data-equalHeightGroup="ehg1">
    <header><h3>People I Like</h3><a>Add Person</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. 
</div>
<div class="contentBox"
    data-flow="left"
    data-pad=""
    data-width="191"
    data-equalHeightGroup="ehg1">
    <header><h3>People I Love</h3><a>Add Person</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque.
</div>
<div class="contentBox"
    data-flow="left"
    data-pad="right"
    data-width="301"
    data-equalHeightGroup="ehg2">
    <header><h4>Favorite Movies</h4><a>Add Movie</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. 
</div>
<div class="contentBox"
    data-flow="left"
    data-pad=""
    data-width="301"
    data-equalHeightGroup="ehg2">
    <header><h5>Favorite Cars</h5><a>Add Car</a></header>
    Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. 
</div>
<div class="contentBox">
    <header><h6>Other Stuff</h6><a>Add Stuff</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. 
</div>    

The Script

//Enable ContentBox(es)
$(parentElementSelector + " .contentBox").each(function () {
    //Add ui-widget-header class to header.
    $(this).children("header:first-child").addClass("ui-widget-header");

    //Set the width
    if (isAttrDefined($(this).attr("data-width")) && $(this).attr("data-width") != "") {
        $(this).css("width", $(this).attr("data-width"));
    }

    //Set the flow. Options (left, right, block)
    switch ($(this).attr("data-flow")) {
        case "left":
            $(this).css("float", "left");
            break;
        case "right":
            $(this).css("float", "right");
            break;
        default: //block
            $(this).css("float", "");
            $(this).css("clear", "both");
            break;
    }

    //Set the pad (margin) class. Options (left, right, both, none)
    if (isAttrDefined($(this).attr("data-pad")) && $(this).attr("data-pad") != "" && $(this).attr("data-pad") != "none") {
        switch ($(this).attr("data-pad")) {
            case "left":
                $(this).addClass("contentBoxPadLeft");
                break;
            case "right":
                $(this).addClass("contentBoxPadRight");
                break;
            case "both":
                $(this).addClass("contentBoxPadRight");
                break;
        }
    }
});

//Enable EqualHeight(s)
var equalHeightGroups = new Array();
$(parentElementSelector + " [data-equalHeightGroup]").each(function () {
    if ($(this).attr("data-equalHeightGroup") != "" && equalHeightGroups[$(this).attr("data-equalHeightGroup")] == undefined) {
        equalHeightGroups[$(this).attr("data-equalHeightGroup")] = $(this).attr("data-equalHeightGroup");
    }
});
for (var equalHeightGroup in equalHeightGroups) {
    $(parentElementSelector + " [data-equalHeightGroup='" + equalHeightGroup + "']").equalHeightColumns();
}

//Enable EqualWidth(s)
var equalWidthGroups = new Array();
$(parentElementSelector + " [data-equalWidthGroup]").each(function () {
    if ($(this).attr("data-equalWidthGroup") != "" && equalWidthGroups[$(this).attr("data-equalWidthGroup")] == undefined) {
        equalWidthGroups[$(this).attr("data-equalWidthGroup")] = $(this).attr("data-equalWidthGroup");
    }
});
for (var equalWidthGroup in equalWidthGroups) {
    $(parentElementSelector + " [data-equalWidthGroup='" + equalWidthGroup + "']").equalWidths();
}

The CSS

 
/* Content Box Stuff */
.contentBox { margin-bottom:15px; padding:6px; border:1px solid #8C857B; }
.contentBoxPadLeft { margin-left:15px; }       
.contentBoxPadRight { margin-right:15px; }    
.contentBoxPadBoth { margin-left:15px; margin-right:15px; }
.contentBox header { margin:-7px -7px 6px -7px; padding:6px 6px 6px 6px; display:block; zoom: 1; }
.contentBox header h1, .contentBox header h2, .contentBox header h3, .contentBox header h4, .contentBox header h5, .contentBox header h6
{ margin:0px; color:#403C35; font-size:1em; font-style:normal; display:inline; } 
.contentBox header:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.contentBox header a, .contentBox header a:active, .contentBox header a:visited
{ float:right; color:#50692A; text-decoration:underline; font-size:80%; margin-left:9px; }
.contentBox header a:hover { color:#6D8F3A; text-decoration:underline; cursor:pointer;  }

<!-- The jQuery UI styling of your choice -->
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />