Navigation toolbar

NigelAlford

What is everyone using for nav toolbar? I'm curious to see some other style examples and or library. I'm experimenting with Jquery and an older dojo based library:

DouglasHall

I've been doing a minimalist, across the screen, combined title and toolbar. Using jquery ui buttons and jquery ui theme roller. Click a button and then open a jquery ui dialog that floats on top of screen.

- Doug at http://spatialexception.org

//html
    <div id="titleBar">
        <div style="position: absolute; top: 10px; left: 10px; font-size: 200%; font-weight: bolder; font-family: Verdana, Arial; height: 30px; color: #0b93d5;">
            Application Title
        </div>
        <div style="position: absolute; top: 10px; right: 3px;">
            <button id="btnCustomTool"></button>
            <button id="btnLayerLegend" style="margin-left: 25px"></button>
            <button id="btnIdentify"></button>
            <button id="btnFindAddress"></button>
            <button id="btnMeasure"></button>
            <button id="btnBasemap"></button>
            <button id="btnInitialExtent"></button>
            <button id="btnClearGraphics"></button>
            <button id="btnAbout"></button>
        </div>
    </div>
    <div id="map">
    </div>
    <div id="dialogFindAddress" class="vgisDialog vgisHidden">
    </div>
    ....

//css
#titleBar {
    top: 0px;
    height: 44px;
    width: 100%;
    z-index: 199;
    background-color: #444444;
    position: absolute;
}
#map {
    width: 100%;
    top: 44px; 
    bottom: 0px;
    overflow: hidden;
    position: absolute;
}

//javascript

//Fix for jquery/dojo z index conflict
dijit.popup._beginZIndex = 5000;

$("#btnFindAddress").button({
                text: false,
                icons: { primary: 'ui-icon-contact' },
                label: 'Enter and locate a street address'
            }).click(function () {
                $(this).blur().button('refresh');
                var $pane = $('#dialogFindAddress');
                if ($pane.dialog('isOpen')) {
                    $pane.dialog('close');
                } else {
                    $pane.removeClass('vgisHidden').dialog('open');
                }
            });

$('#dialogFindAddress').dialog({
                autoOpen: false,
                width: 400,
                height: 175,
                position: 'bottom',
                title: 'Find Address',
                close: function (event, ui) {
                    map.graphics.clear();
                }
            });