As I mentioned in my last post I’m playing with this idea of building a scoring application for boxing / mma events.

I want it to be a single page web application that scales to fit phones, tablets, etc.

An event contains a number of “bouts” and each bout will be a section in a jQuery UI Accordion control.

However, as is often the case, there are a couple of real world conditions that I couldn’t find documentation of sample to demonstrate.

1.) Event event can have a different number bouts.

This means that the accordion sections have to be dynamically built at runtime in the html page.

2.) The order of the events can change right up to the event time.

This means that the USER needs to be able to change the visual sequence of the bouts.

3.) The click-able header needs to be multiple elements.

All the demos I found assumed the headers were simple H3 elements.

You can play with a working version by clicking the image below.

Note that you can not only open and close the “bouts” but you can re-order them using drag-n-drop on the title bars.

– - – THIS IS A UI PROTOTYPE – - –

FightCard- 001

Built this way I can now add the AJAX logix fo recieve a JSON package that contains the event detail and use that data to populate the event.

Here is the code as it exists so far.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fight Card</title>
<link rel="stylesheet"
 href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
    /* IE has layout problems when sorting  */
    .group { zoom: 1 }
</style>

<script>

//-----------------------------------------------------------+
// addBout() - Add a single node to the accordian
// TODO: add JSON object as input parameter and build the
//       bout with that data,
//-----------------------------------------------------------+
function addBout(){
    var bout =
        "<div class=\"group\">" +
            "<span class=\"handle\"> " +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width33pct align-left\">" +
                            "<strong>Blue Fighter TBD</strong>" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "vs." +
                        "</span>" +
                        "<span class=\"cell width33pct align-right\">" +
                            "<strong>Red Fighter TBD</strong>"+
                        "</span>" +
                    "</div>" +
                "</div>" +
            "</span>" +
            "<div>" +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "Round<br />0" +
                        "</span>" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                    "</div>" +
                "</div>" +
                "<span>" +
                "Mauris mauris ante, blandit et, ultrices a, suscipit , " +
                "quam. Integerut neque. <br /> Vivamus nisi metus molestie" +
                " vel, gravida in, condimentum sit amet, nunc. Nam a nibh." +
                "accordion .ui- iconDonec suscipit eros. Nam mi. Proin " +
                " viverra leo ut odio. Curabitur malesuada. Vestibulum a " +
                "velit eu ante scelerisque vulputate." +
                "</span>" +
            "</div>" +
        "</div>";
    return bout;
}

$(function() {

    $( "#accordion" )
            .accordion({
                header: "> .group > .handle",
                heightStyle: "content"
            })
            .sortable({
                axis: "y",
                handle: ".handle",
                stop: function( event, ui ) {
                    // IE doesn't register the blur event when sorting
                    // so trigger focusout handler to remove .ui-state-focus
                    ui.item.children(".handle").triggerHandler("focusout");
                }
            });

    //-----------------------------------------------------------+
    // This for loop is just for testing.
    // The real app will iterate a JSON collection and send
    // each bout node to the addBout function for insertion
    // into the accordion
    //-----------------------------------------------------------+
    for (var i=0;i<5;i++) {
    $("#accordion").append(addBout()).accordion("refresh");
    }
});
</script>

</head>

<body>

<div id="main-container" class="main-container">
    <div id="accordion">
    <!-- Bouts will be inserted here -->
    </div>
</div>

</body>
</html>

And the CSS

body {
   font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
   font-size: 62.5%;
   background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;body {
	font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
	font-size: 62.5%;
    background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;
}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}