|
New | |
|
Open | |
|
Save | |
| Save As... | ||
| Close | ||
| Empty |
 |
WebFX Home | |
 |
Mail Erik | |
|
Mail Emil |
This page descibes how to combine the dock bar script with the dhtml menu to create a dockable menu.
The structure of the page is the same as for the dock bar script with a menuBar
element inside the toolBar. You should imclude the following files in the normal way:
dockbar.js, menu3.js and
menu.css. Note that the dockbar javascript file has been updated a little
to add a needed feature for this page to work.
The next step is to modify the stylesheet a little to fix a small bug in IE.
<style type="text/css">
.root, .rootHighlight, .rootActive {position: relative; top: -1px;}
</style>
Next the constants for the dockbar are set in the same way as in the dock bar article. The dock bar script has been updated to generate a fake event when the tool bar is docked. This is needed to change the direction type of the root elements when the dock bar is changed between top/bottom and left/right position.
<script type="text/javascript">
var floatWidth = 127;
var floatHeight = 23;
var snapHorizSize = 50;
var snapVertSize = 20;
var horizDockWidth = 51;
var vertDockHeight = 19;
var toolbarPos = "top";
var roots = new Array();
function toolBarOnDock() {
if (roots.length == 0) { // Not initiated yet
var spans = document.all.tags("SPAN")
var j=0;
for (var i=0; i<spans.length; i++) {
if (spans[i].className == "root")
roots[j++] = spans[i];
}
}
switch (toolbarPos) {
case "top":
case "bottom":
case "float":
for (var i=0; i<roots.length; i++) {
roots[i].direction = "vertical";
roots[i].style.width = "10px";
}
break;
case "left":
case "right":
for (var i=0; i<roots.length; i++) {
roots[i].direction = "horizontal";
roots[i].style.width = "50px";
}
break;
}
}
</script>
Now you need to set up the dock bar, the menu bar, the menus and the contentDiv. This is very similar to what we have done before so I'll just show the code.
<body scroll="no" onselectstart="return false" >
<div id="toolbar" ondock="toolBarOnDock()"><span id="handle" onmousedown="hideAllMenuScriptlets()"></span>
<span class="menuBar" id="menuBar"
onmouseover="menuBarOver()"
onmouseout="menuBarOut()"
onclick="menuBarClick()">
<span class="root" menu="fileMenu">File</span
><span class="root" menu="editMenu">Edit</span
><span class="root" menu="WebFXMenu">WebFX</span>
</span>
</div>
<!-- Define the menus -->
<div id="contentDiv">
<script type="text/javascript">
fixSize();
</script>
<!-- Content goes here -->
</div>
Note that in this case the function fixSize is provided by the dock bar script.