Jaml and jQuery Modal

in this fiddle we are showcase the use of Jaml which then gets inserted to a div to become a dialog. Also to note, is the addition of custom classes via the class property of the buttons property in the jQuery UI Dialog.

by napotopia

HTML

<script src="https://raw.github.com/edspencer/jaml/master/Jaml-all.js"></script>
<link rel="stylesheet" href="http://www.manheim.com/assets/ui-lightness/jquery-ui-1.8.24.custom-c3618edec012de21a0a06f3152f14c6f.css">
<div id="bidder_dialog" class="bidder-dialog"></div>

CSS

/* Non-image global primary and secondary buttons */

.btn_primary {
    background: #fe851f; /* Old browsers */
    background: -moz-linear-gradient(top,  #fe851f 0%, #dd7b0c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe851f), color-stop(100%,#dd7b0c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fe851f 0%,#dd7b0c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fe851f 0%,#dd7b0c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fe851f 0%,#dd7b0c 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #fe851f 0%,#dd7b0c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe851f', endColorstr='#dd7b0c',GradientType=0 ); /* IE6-9 */
    border: 1px solid #935105;
} /*currently orange */

.btn_primary:hover  {
    background: #bf6a0b; /* Old browsers */
    background: -moz-linear-gradient(top,  #bf6a0b 0%, #dd7b0c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bf6a0b), color-stop(100%,#dd7b0c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #bf6a0b 0%,#dd7b0c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #bf6a0b 0%,#dd7b0c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #bf6a0b 0%,#dd7b0c 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #bf6a0b 0%,#dd7b0c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf6a0b', endColorstr='#dd7b0c',GradientType=0 ); /* IE6-9 */
    border: 1px solid #935103;
}

.btn_primary:active {
    background: #dd7b0c; /* Old browsers */
    background: -moz-linear-gradient(top,  #dd7b0c 0%, #fd961f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd7b0c), color-stop(100%,#fd961f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, ...

JavaScript

var data = {
    high_bidder   : {amount     : '$13,000', 
                     dealer_name : 'High Bidder 1'},
    backup_bidder : [{amount     : '$12,800',
                      dealer_name : 'Backup Dealer 1'}, 
                     {amount     : '$12,600',
                      dealer_name : 'Backup Dealer 2'}, 
                     {amount     : '$12,400',
                      dealer_name : 'Backup Dealer 3'}]
};

Jaml.register('bidder_button', function(data) {
    a({cls: 'btn_primary btn_anchor', href:'#'}, 
      p(data.amount),
      p(data.dealer_name)
      )
});

Jaml.register('bid_panel', function(data) {
    div({id : "bidder_dialog"},
        div({cls: 'column one first'},
          h3('High Bidder'),
          Jaml.render('bidder_button', data.high_bidder)
      ),
      div({cls: 'column two'},
          h3('Back-up Bidders'),
          Jaml.render('bidder_button', data.backup_bidder)
          )
  )
});

var $bidder_dialog  = $('#bidder_dialog'),
    bid_panel_html  = Jaml.render('bid_panel', data),
    dialog_settings = { dialogClass : 'default-dialog',
                        width   : 600,
                        modal   : true,
                        title   : 'Select Winning Bid/Buyer', 
                        buttons : [{ text  : 'Cancel', 
                                     click : function() {$(this).dialog('close')},  
                                     class : 'btn_secondary btn_anchor', 
                                     id    : 'bidder_dialog_cancel_button'
                        }]};
    
$bidder_dialog
    .append(bid_panel_html)
    .dialog(dialog_settings);
                                                         
if (!$('.column.two a', $bidder_dialog).length) {
    $bidder_dialog.append('<p>None</p>');
}