Navigation toolbar

NigelAlford — Tue, 20 Nov 2012 13:14:35 GMT

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:

Re: Navigation toolbar

DouglasHall — Sat, 11 Dec 2021 13:57:27 GMT

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();
                }
            });

topic Re: Navigation toolbar in ArcGIS JavaScript Maps SDK Questions

Navigation toolbar

Re: Navigation toolbar