QUID (Quick UI Development)

UI Simplified.

Leave the kitchen sink at home. QUID Components utilize jQuery and jQueryUI to create compact interface elements from standard HTML markup. See the demo in action here.

Grid Component

The QUID Grid Component turns standard HTML table markup into a light-weight, scrollable table with fixed headers and lockable left-hand columns.

HTML Code:

<table id="my-table">
    <thead>
        <tr>
            <th data-class="quid-locked-cell">Symbol</th>
            <th data-class="quid-locked-cell">Company</th>
            <th>Date</th>
            <th>Trade Price</th>
            <th>Dividend Yield</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>MMM</td>
            <td>3M Company Common</td>
            <td>3/2/12</td>
            <td>87.34</td>
            <td>2.56</td>
            ...
        </tr>
        ...
    </tbody>
</table>

JavaScript Code:

$('#my-table').quidGrid();

Result:

QUID Grid Screenshot

Toolbar Component

The QUID Bar Toolbar Component works with standard HTML lists and allows for segmented buttons and hiearchial menus.

HTML Code:

<div id="my-toolbar">
    <ul>
        <li><a href="#" data-icon="ui-icon-pencil">Edit</a></li>
        <li><a href="#" data-icon="ui-icon-trash" data-confirm="Are you sure you want to hide the 'Date' column?">Hide Date</a></li>
        <li><a href="#">Fruits</a>
            <ul>
               <li><a href="#">Apples</a>
                   <ul>
                       <li><a href="#">Granny Smith</a></li>
                       <li><a href="#">Red Delicious</a></li>
                   </ul>
               </li>
               <li><a href="#">Blackberries</a></li>
               <li class="quid-menu-separator">-</li>
               <li><a href="#">Oranges</a></li>
               <li><a href="#">Grapefruit</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li><a href="#" data-icon="ui-icon-clock">Another</a>
            <ul>
               <li><a href="#">Four.One</a></li>
               <li><a href="#">Four.Two</a></li>
               <li class="quid-menu-separator">-</li>
               <li><a href="#">Four.Four</a>
                    <ul>
                        <li><a href="#">Apples</a>
                            <ul>
                                <li><a href="#">Granny Smith</a></li>
                                <li><a href="#">Red Delicious</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Oranges</a></li>
                        <li><a href="#">Grapefruit</a></li>
                    </ul>
               </li>
            </ul>
        </li>
        <li><input type="text" placeholder="Keywords" style="width:100px"/></li>
        <li><a href="#" data-text="false" data-icon="ui-icon-search">Search</a></li>
    </ul>
</div>

Javascript Code:

$('#my-toolbar').quidBar();

Result:

QUID Toolbar Screenshot


Available At:

See Also: