UI

by bizamajig

HTML

<aside id="control-panel">
    <h1></h1>
    <div id="control-panel-content">
        <h2>Boards</h2>
        <nav>
            <ul>
                <li><a href="#Board-1">Board 1</a></li>
                <li><a href="#Board-2">Board 2</a></li>
            </ul>
        </nav>
        <h2>Tools</h2>
        <nav>
            <ul>
                <li></li>
            </ul>
        </nav>
        <h2>Menus</h2>
        <nav>
            <ul>
                <li></li>
            </ul>
        </nav>
        <h2>Admin</h2>
        <nav>
            <ul>
                <li></li>
            </ul>
        </nav>    
    </div>    
</aside>
<div id="container"> 
    <div id="main" role="main"> 
        <nav>
            <ul>
                <li><a href="#Tab-1">Contacts</a></li>
                <li><a href="#Tab-2">Contacts (input)</a></li>
            </ul>
        </nav>
        
        <article id="Tab-1">
<table class="inputtable">
    <thead>
        <tr>
            <th>Name
            <th>Address
            <th>Phone
    <tbody>
        <tr>
            <td>
                Kaleb Hornsby
            <td>
                [email protected]
            <td>
                831-917-5861
        <tr>
            <td>Rick Willis
            <td>[email protected]
            <td>
</table>
            
        </article>
        <article id="Tab-2">
            <br />
            <table class="inputtable">
                <tr>
                    <td>First Name </td>
                    <td><input type="text" name="fname" /></td>
                </tr>
                <tr>
                    <td>Last Name </td>
                    <td><input type="text" name="lname" /></td>
                </tr>
                <tr>
                    <td>Address </td>
                    <td><textarea name="address"></textarea></td>
                </tr>
                <tr>
                    <td>Phone </td>
                    <td><input type="text" name="phone" /></td>
   ...

CSS

.ui-widget {
    font-size:1em;
}
html { font-family: sans-serif; }
body {
    padding:0;
}
#container {
    padding:0 0 0 230px;
}
#container>header {
    background:blue;
}
#container>nav {
    background:yellow;
}
#container>nav li {
    display:inline;
}
#main {
}
#control-panel {
    position:absolute;
    left:0;
    top:0;
    width:230px;
    height:100%;
    background: grey;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
}
#container>footer {
    position:absolute;
    bottom:0;
    width:100%;
    background:grey;
}
#container footer div.ui-buttonset {
    display:inline-block;
    position:relative;
}
.ie6 #container>footer {
    height:1px;
}
input[type="search"] {
    -webkit-appearance:searchfield;
}
button.advanced, input.advanced {}
.ESi-Menu {
    display:none;
    border:1px solid lightgrey;
    position:absolute;
    width:200px;
    bottom:45px;
    left:45px;
    z-index:10000;
    color:#444;
}
.ESi-Menu li {
    cursor:pointer;
}
.ESi-Menu li:hover, .ESi-Menu li:nth-child(odd):hover {
    background:#a8a3ae;
}
.ESi-Menu li:nth-child(odd) {
    background:#EEE;
}
body {
    overflow-x:hidden;
}
.ui-accordion-header {
    padding-left:1.5em;
}
.ui-accordion-content {
    padding:0px !important;
}
.ui-accordion-content li a {
    text-decoration:none;
}
.ui-accordion-content li:nth-child(odd) {
    background:rgba(44,44,44,.4);
}

.inputtable {
    border-collapse:separate;
    border-spacing:5px;
}
#ESi-Search-Dialog {
    display:none;
}
.ui-dialog form, .ui-dialog input {
    display:block;
}

JavaScript

$(function() {
    $('#control-panel-content').accordion();
    $('#main').tabs();
    $('button.ESi-ui').each(function(){
        $this = $(this);
        $this.button({
            text: false,
            icons: {
                primary:
                $this.attr('data-icon'),
                secondary:
                $this.attr('data-secondary-icon'),
                label: $this.attr('data-label')
            }
        });
    });
    $('#ESi-spellcheck').button().parent().buttonset();
    $('#ESi-print-adv').click(function() {
        $('#ESi-print-adv-options').toggle();
    });
    //Search Stuff
    $('#ESi-search-adv').click(function() {
        $('#ESi-search-adv-options').toggle();
    });
    //Advanced Options
    $('button.advanced').button({
        text: false,
        icons: {
            primary: "ui-icon-triangle-1-w"
        }
    }).click(function() {
        //$(this).find(':first')
        $(this).children(':first').toggleClass("ui-icon-triangle-1-n").toggleClass("ui-icon-triangle-1-w");
    }).parent().buttonset();
    
    $('#ESi-Search-Dialog').dialog({
            autoOpen: false,
            height: 320,
            width: 350,
            modal: true,
            buttons: {
                Search: function() {},
                Cancel: function() {
                    $(this).dialog( "close" );
                }
            }
});
    
    $('#ESi-Advanced-Search-Open').click(function(){
        $('#ESi-Search-Dialog').dialog('open');
    });

});