📄 demo-menu-bar-2.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Demo 2: Menu bar</title>
<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
<script type="text/javascript" src="../js/menu-for-applications.js"></script>
<style type="text/css">
body{
margin:0px;
text-align:center;
}
#mainContentainer{
width:760px;
margin:0 auto;
text-align:left;
}
#mainContent{
border:1px solid #000;
}
#textContent{
height:400px;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#menuDiv{
width:100%;
overflow:hidden;
}
pre{
color:#F00;
}
p,pre{
}
</style>
</head>
<body>
<div id="mainContentainer">
<div id="header">
<img src="../images/heading3.gif">
</div>
<div id="mainContent">
<!-- This <ul><li> list is the source of a menuModel object -->
<ul id="menuModel" style="display:none">
<li id="50000"jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
<ul width="150">
<li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
<li id="500002"><a href="#">Save As</a></li>
<li id="500004" itemType="separator"></li>
<li id="500003"><a href="#">Open</a>
<ul width="130">
<li id="5000031"><a href="#">Project</a>
<li id="5000032"><a href="#">Template</a>
<li id="5000033"><a href="#">File</a>
</ul>
</li>
</ul>
</li>
<li id="50001"><a href="#">View</a>
<ul width="130">
<li id="500011"><a href="#">Source</a></li>
<li id="500012"><a href="#">Debug info</a></li>
<li id="500013"><a href="#">Layout</a></li>
</ul>
</li>
<li id="50003" itemType="separator"></li>
<li id="50002"><a href="#">Tools</a></li>
</ul>
<!-- This is the datasource for menu items which are added dynamically to the menu -->
<ul id="additionalModel" style="display:none">
<li id="60000"><a href="#">Internet Option</a></li>
<li id="60001"><a href="#">Debug URL</a></li>
<li id="60001"><a href="#">CVS</a>
<ul width="100">
<li id="600011"><a href="#">Check out</a></li>
<li id="600012"><a href="#">Update</a></li>
</ul>
</li>
</ul>
<div id="menuDiv"></div>
<div id="textContent">
<h4>General description</h4>
<p>The menu above has been created dynamically based on an unordered list. Here's the code for that list:</p>
<p>
<pre>
<ul id="menuModel5" style="display:none">
<li id="50000" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
<ul width="150">
<li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif">
<a href="#" title="Save your work">Save</a>
</li>
<li id="500002"><a href="#">Save As</a></li>
<li id="500004" itemType="separator"></li>
<li id="500003"><a href="#">Open</a></li>
</ul>
</li>
<li id="50001"><a href="#">View</a>
<ul width="130">
<li id="500011"><a href="#">Source</a></li>
<li id="500012"><a href="#">Debug info</a></li>
<li id="500013"><a href="#">Layout</a>
<ul width="150">
<li id="5000131"><a href="#">CSS</a>
<li id="5000132"><a href="#">HTML</a>
<li id="5000133"><a href="#">Javascript</a>
</ul>
</li>
</ul>
</li>
<li id="50003" itemType="separator"></li>
<li id="50002"><a href="#">Options</a></li>
</ul>
</pre>
</p>
<p>A menu item could have these attributes:</p>
<ul>
<li>id = Unique numeric id for a menu item. (the "id" of the <li> tag) </li>
<li>parentId = Id of parent element. The script fetches this dynamically from the ul list. </li>
<li>itemText = Text of menu item. The content of the <A> tag in the list</li>
<li>itemIcon = A custom attribute which you can add to the <LI> tag</li>
<li>type = Attibute for the <LI> tag. Example: "separator"</li>
<li>jsFunction = Attribute for the <LI> tag. This js code will be executed when someone clicks on the menu item.</li>
<li>url = The href attribute of the <A> tag.</li>
</ul>
<p>Also notice <UL width="150">. The width attribute sets the width of a sub menu group</li>
<p>The menu is then created with the following Javascript syntax:</p>
<pre>
<script type="text/javascript">
var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.setMainMenuGroupWidth(00);
menuModel.init();
var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuDiv');
menuBar.init();
</script>
</pre>
<h4>Append menu items dynamically</h4>
<p>It is also possible to update the menu dynamically after is has been loaded. You can add nodes, delete nodes or replace nodes. All this is done from some simple methods. </p>
<p>Example: <a href="#" onclick="menuBar.replaceMenuItems(50002,menuModel_add);return false">Click here to add some menu items under Tools</a>.</p>
<p>What I have done is to create a new menuModel object based on another unordered list: </p>
<p>The list:</p>
<pre>
<ul id="additionalModel" style="display:none">
<li id="60000"><a href="#">Internet Option</a></li>
<li id="60001"><a href="#">Debug URL</a></li>
<li id="60001"><a href="#">CVS</a>
<ul width="100">
<li id="600011"><a href="#">Check out</a></li>
<li id="600012"><a href="#">Update</a></li>
</ul>
</li>
</ul>
</pre>
<p>The js code for the menuModel:</p>
<pre>
var menuModel_add = new DHTMLSuite.menuModel();
menuModel_add.addItemsFromMarkup('additionalModel');
menuModel_add.init();
</pre>
<p>Finally, I have created an <a> tag which calls the replaceMenuItems method when you click on it:</p>
<pre><a href="#" onclick="menuBar.replaceMenuItems(50002,menuModel_add);return false">Click here...</a></pre>
<h4>Show/Hide menu items</h4>
<p>There are two methods which you can use to show or hide a menu item. These menu items won't be deleted from the menu model. </p>
<p>Here are some examples of how this works:</p>
<p> <a href="#" onclick="menuBar.hideMenuItem(50000);return false">Hide item (File menu)</a>
<a href="#" onclick="menuBar.showMenuItem(50000);return false">Show item (File menu) </a>
</p>
<p>Here's the code for these two <A> tags:</p>
<pre>
<a href="#" onclick="menuBar.hideMenuItem(50000);return false">Hide item (File menu)</a>
<a href="#" onclick="menuBar.showMenuItem(50000);return false">Show item (File menu) </a>
</pre>
<p>They are both methods on the menuBar object. The argument sent to this method(50000) is the id of the menu item you want to show or hide.</p>
</div>
</div>
</div>
<script type="text/javascript">
var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.setMainMenuGroupWidth(00);
menuModel.init();
var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuDiv');
menuBar.init();
/* Create menu model for additional elements */
var menuModel_add = new DHTMLSuite.menuModel();
menuModel_add.addItemsFromMarkup('additionalModel');
menuModel_add.init();
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -