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