jQuery Mockup of UI

jQuery live UI of common elements used in PSD mockups.

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>
<div class="tool-container">   
    <div class="ui-bar ui-bar-b" id="ww-header-bar">
        <h3 id="ww-header-title">FIND A PLAN</h3>
    </div>    

   
    <div class="ui-bar ui-bar-c" id="ww-pagenav-bar">
        <div style="float:right;">                    
            <button type="button" data-mini="true" data-inline="true" data-theme="e" data-icon="arrow-l" data-iconpos="notext" id="btnPrevPage">Prev</button>
            <span class="ui-btn-up-c" id="ww-pagenav-range">1 to 3 of 3</span>         
            <button type="button" data-mini="true" data-inline="true" data-theme="e" data-icon="arrow-r" data-iconpos="notext" id="btnNextPage">Next</button>
        </div>
    </div>

    <div class="ui-bar ui-bar-e" id="ww-search-criteria">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                Phone Cost:
                <p>Up to $200</p>
            </div>
            <div class="ui-block-b">
                Phone Features:
                <p>LTE, Wi-Fi, GPS, HD Video Recording, Front &amp; Rear Cameras, Dual-Core Processor, Apple iOS or Android</p>                 
            </div>
            <div class="ui-block-c">
                Carrier(s):<p>Telus, Rogers</p>
            </div>
        </div>
        <a href="#gonowhere" data-role="button" data-inline="true" data-mini="true" data-icon="refresh" data-iconpos="right" data-theme="c" id="btnNewSearch">New Search</a>         
    </div>    
        
        
    <div class="ww-search-results-container">
        <div class="ww-search-result" id="sr-entry1">  
             <div class="ww-selectbox-container">
                 <a href="#donothing" ww-checked="0" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" id="chkEntry1">Select</a>              
            </div>        ...

CSS

.compare-button label{padding:0px; border-radius:0.5em;}

#findNow { margin-left:0px; margin-right:0px;}

.tool-container {padding:20px; width:720px;}

#ww-header-bar {}
#ww-header-title{font-weight:bold; font-size: 1.2em; float:left;}
#btnNewSearch {float:right;}


#ww-pagenav-bar{padding:0px; margin:0px;}
#ww-pagenav-buttons {width:200px; vertical-align:middle; height:100%; padding:0px; margin:0px;}
#ww-pagenav-range {padding:3px; font-size:0.70em; -webkit-border-radius: 0.5em; border-radius:0.5em;}
#ww-search-criteria {margin-top:10px; padding:5px; font-size:0.70em; -webkit-border-radius: 0.5em; border-radius:0.5em; min-height:30px;}

.ww-search-results-container {margin-top:25px; margin-bottom:25px; width:100%; height:100%;}
.ww-search-result{clear:both;}
.ww-entry-item{float:right; paddding:0px; margin:0px; width:96%;}
.ww-entry-details-container{ min-height:100px;}
.ww-phone-list {clear:both;}
.ww-phone-list li a {font-size:0.8em;}
.ww-match-bubble {float:right; padding:3px; font-size:0.70em; -webkit-border-radius: 0.5em; border-radius:0.5em;}

.ww-selectbox-container {float:left;}
.ww-info-button { padding:0px; margin:0px; margin-bottom:10px; float:right;}
.ww-findphone-button { padding:0px; margin:0px; float:right;}

.ww-carrier-entry{ clear:both; }

/* margin: top right bottom left; */
#lbNumSelected {display:table-cell; vertical-align:middle; text-align:center; font-size:0.7em; width:50%;}
#ww-footer-bar {padding:0px; margin:65px 0px 0px 0px !important; width:100%; display:table;}
#ww-footer-button-bar {margin:0px; padding:5px; float:right;}

JavaScript

//var new_btn = $('<button id="btn">Click</button>');
//new_btn.insertBefore('#entry1');

var numSelected = 0;

// does not apply to <a> with data-role="button"
$("#btnPrevPage").button("disable"); // "enable"
$("#btnNextPage").button("disable");

// how to programmatically disable <a> with data-role="button"
$("#btnEmailSelected").addClass("ui-disabled");
$("#btnCompareSelected").addClass("ui-disabled");

$(".ww-info-button").click(function(){
    alert("Testing layout for Info button if implemented elsewhere in the tool.");
});

$('#chkEntry1, #chkEntry2, #chkEntry3').click(function() {
    //$(this).button().attr("data-theme", "b");
    var chkBox = $(this).button();
    var isChecked = chkBox.attr("ww-checked") == "1";
    
    if ( isChecked )
    {
        $(this).buttonMarkup({theme:"c"});
        $(this).button().removeClass("ui-btn-up-b ui-btn-down-b ui-btn-hover-b");
        chkBox.attr("ww-checked", "0");
        numSelected--;
        // remove selection from hidden field (use this.id)
        // ...                
    }
    else
    {
        $(this).buttonMarkup({theme:"b"});
        $(this).button().removeClass("ui-btn-up-c ui-btn-down-c ui-btn-hover-c");        
        chkBox.attr("ww-checked", "1");
        numSelected++;
        // add selection to hidden field (use this.id)
        // ...
    }
    
    if ( numSelected == 0 )
    {
        $("#btnEmailSelected").addClass("ui-disabled");
        $("#btnCompareSelected").addClass("ui-disabled");
    }
    else
    {      
        $("#btnEmailSelected").removeClass("ui-disabled");
        if ( numSelected > 1 )
            $("#btnCompareSelected").removeClass("ui-disabled");        
        else
            $("#btnCompareSelected").addClass("ui-disabled");        

    }
    
    if ( numSelected == 1 )
        $("#lbNumSelected").html( numSelected + " phone selected");
    else // all other cases we want the plural text
        $("#lbNumSelected").html( numSelected + " phones selected");      ...