JFS UI Development

by justjohn

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.0.6.js"></script>
<script src="http://cdn.phpfoundry.com/dx.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="https://ui.phpfoundry.com/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<script src="https://ui.phpfoundry.com/jquery-ui-multiselect-widget/src/jquery.multiselect.tags.js"></script>
<script src="https://ui.phpfoundry.com/jquery-ui-multiselect-widget/src/jquery.multiselect.filter.js"></script>
<h1>Form Tests</h1>
<div class="block-container">
    <div class="block-2">
        <h2>Buttons</h2>
        <h3>With Whitespace Between</h3>
        <input type="button" class="fjs-ui-button" value="Input" />
        <input type="button" class="fjs-ui-button" value="Input" />
        <a href="javascript:" class="fjs-ui-button">Hyperlink</a>
        <a href="javascript:" class="fjs-ui-button">Hyperlink</a>
        
        <h3>Without Whitespace Between</h3>
        <input type="button" class="fjs-ui-button" value="Input" /><input type="button" class="fjs-ui-button" value="Input" /><a href="javascript:" class="fjs-ui-button">Hyperlink</a><a href="javascript:" class="fjs-ui-button">Hyperlink</a>
    </div>
    <div class="block-2">
        <h2>Text Fields</h2>
        <input type="text" class="fjs-ui-text" />
        <input type="text" class="fjs-ui-text" />
        
        <h2>Select Fields</h2>
        <select class="fjs-ui-select">
            <option>Single</option>
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
            <option>Four</option>
            <option>Five</option>
        </select>
        <select class="fjs-ui-select-multi" multiple="mulitple">
            <option selected="selected">Multi</option>
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
           ...

CSS

body {
    background:#eee;
}
h1, h2, h3 {
    margin:10px 5px;
}
h1 { font-size: 16pt; }
h2 { font-size: 14pt; }
 
/** Get rid of extra padding around buttons  */
button.fjs-ui::-moz-focus-inner,
input.fjs-ui::-moz-focus-inner {
    margin:0;
    padding:0;
    border: 0;
}
.fjs-ui {
    text-decoration: none;
    font: 10pt verdana;
    cursor:default;
}

.fjs-ui-button, .fjs-ui-select {
    margin:3px;
    border:0;

    color:black;
    background-color:#c7c7c7;
    border:1px solid #777777;
    
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #F9F9F9, rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(top, #F9F9F9, rgba(255, 255, 255, 0)); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, #F9F9F9, rgba(255, 255, 255, 0)); /* IE10 */
    background-image:      -o-linear-gradient(top, #F9F9F9, rgba(255, 255, 255, 0)); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #F9F9F9, rgba(255, 255, 255, 0));
    
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    
    -moz-box-shadow: 0 0 4px #999;
    -webkit-box-shadow:0 0 4px #999;
    box-shadow:0 0 4px #999;
    
    text-shadow: 0 1px 1px white;
}

.fjs-ui-button {
    display:inline-block;
    padding:6px 9px;
}

/** Only use transitions on iOS and Desktop, not Android */
.dx-desktop .fjs-ui-button,
.dx-ios .fjs-ui-button {
    -webkit-transition:background 0.2s linear;
    -moz-transition:   background 0.2s linear;
    -o-transition:     background 0.2s linear;
    transition:        background 0.2s linear;
}
  
.fjs-ui-button.fjs-ui-active {
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    
    -moz-box-shadow: 0 0 3px #a5a5a5;
    -webkit-box-shadow:0 0 3px #a5a5a5;
    box-shadow:0 0 3px #a5a5a5;
    
    border:1px solid...

JavaScript

if (!FoundryJS) var FoundryJS = {};

FoundryJS.UI = {
    init: function() {
        // Wrap select elements and remove the class from the select 
        $(".fjs-ui-select").removeClass("fjs-ui-select").addClass("fjs-ui")
            .wrap('<div class="fjs-ui-select" />')
            .wrap('<div class="fjs-ui-icon-padding" />');
        $(".fjs-ui-select").prepend('<div class="fjs-ui-icon fjs-ui-icon-select" />');
            
        $(".fjs-ui-text").wrap('<div class="fjs-ui-text-wrapper" />');
        $(".fjs-ui-table").wrap('<div class="fjs-ui-table-wrapper" />');
        
        // Add fjs-ui meta-class
        $(".fjs-ui-button,.fjs-ui-text,.fjs-ui-text-wrapper,.fjs-ui-select,.fjs-ui-select-wrapper")
            .addClass("fjs-ui");
        
        // Bind to desktop events
        $(".fjs-ui")
            .bind("mousedown", function() { $(this).addClass("fjs-ui-active"); })
            .bind("mouseup", function() { $(this).removeClass("fjs-ui-active"); })
            .bind("mouseover", function() { $(this).addClass("fjs-ui-hover"); })
            .bind("mouseout", function() {
                $(this).removeClass("fjs-ui-hover");
                $(this).removeClass("fjs-ui-active");
            })
            .bind("focus", function() { $(this).parent().addClass("fjs-ui-focus"); })
            .bind("blur", function() { $(this).parent().removeClass("fjs-ui-focus"); });
        
        // Bind to mobile events
        $(".fjs-ui-button")
            .bind("touchstart", function(e) { e.preventDefault(); $(this).addClass("fjs-ui-active"); })
            .bind("touchend", function() { $(this).removeClass("fjs-ui-active"); });
        
        // Don't allow links to be dragged
        $("a.fjs-ui-button")
            .bind("click", function(e) { e.preventDefault(); })
            .bind('dragstart', function(e) { e.preventDefault(); });
        
        // Select specific events
        $(".fjs-ui-select select")
            .bind("mousedown", function() {...