?? spec.html
字號:
<html>
<head>
<title>Menu G5</title>
<link rel=stylesheet href="../css/menuG5.css" type="text/css">
</head>
<body>
<p align="center" class="title">Menu G5 Specification</p>
<p align="center" class="copyright"><a href="http://www.yxscripts.com">yxScripts.com</a></p>
<a name="top"> </a>
<table align="center">
<tr valign="top">
<td>
<ul>
<li><a href="#zip">Menu G5 package content</a></li>
<li><a href="#files">Files to upload to your site</a></li>
<li><a href="#browser">Browser support</a></li>
<li><a href="#terms">Conventions and terms</a></li>
</td>
<td>
<ul>
<li><a href="#path">Setting up the path script</a></li>
<li><a href="#content">Setting up the content script</a></li>
<li><a href="#style">Setting up the style script</a></li>
<li><a href="#instance">Setting up the instance script</a></li>
</ul>
</td>
<td>
<ul>
<li><a href="#nonframe">Setting up a non-frame menu page</a></li>
<li><a href="#crossframe">Setting up a cross-frame menu page</a></li>
<li><a href="#default">Default settings</a></li>
<li><a href="#userfunction">User functions</a></li>
</ul>
</td>
</tr>
</table><br clear="all">
<a name="zip"> </a>
<ul><li>Menu G5 package content ... [ <a href="#top">top</a> ]</li>
<p class="para">Once unzipped, you should find the following directories and files:</p>
<pre>
- css ... contains a CSS file used by Menu G5 pages (not used by the menus)
- examples ... contains Menu G5 example pages and CSS files
- images ... contains image files used by Menu G5 examples
- menu ... contains JS files used by Menu G5 examples
- faq ... contains documents on Menu G5
- script ... contains Menu G5 scripts
- index.html
</pre>
</ul>
<a name="files"> </a>
<ul><li>Files to upload to your site ... [ <a href="#top">top</a> ]</li>
<p class="para">The files under the "script" directory should be uploaded to your site, and be placed under the same directory (the name of the directory doesn't matter). Or you can simply upload the "script" directory.</p>
</ul>
<a name="browser"> </a>
<ul><li>Browser support ... [ <a href="#top">top</a> ]</li>
<p class="para">Menu G5 supports the following browsers:</p>
<pre>
- IE5+/Win
- Gecko Browsers (Netscape6+, Mozilla, Mozilla Firebird & Firefox, Camino, etc.)
- Opera7x
</pre>
</ul>
<a name="terms"> </a>
<ul><li>Conventions and terms ... [ <a href="#top">top</a> ]</li>
<p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>Compact version : </td>
<td>
<p>Menu G5 provides some compact versions of scripts to reduce file size and save bandwidth. A compact version script is non reading-friendly. In most cases, a menu page should use compact version scripts.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>Loader script : </td>
<td>
<p>Refers to one of the following scripts:<br>- menuG5Loader.js ... non-frame loader script<br>- menuG5LoaderX.js ... compact version<br>- menuG5LoaderFS.js ... cross-frame loader script<br>- menuG5LoaderFSX.js ... compact version</p>
<p>which could be found under the "script" directory of the Menu G5 package.</p>
<p>A loader script should be included in a menu page, it detects the client browser and loads a function script accordingly.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>Function script : </td>
<td>
<p>Refers to one of the following scripts:<br>- menuG5IE.js <br>- menuG5IEX.js <br>- menuG5Gecko.js <br>- menuG5GeckoX.js <br>- menuG5Opera.js <br>- menuG5OperaX.js ... above are the non-frame function scripts</p>
<p>- menuG5IEFS.js <br>- menuG5IEFSX.js <br>- menuG5GeckoFS.js <br>- menuG5GeckoFSX.js <br>- menuG5OperaFS.js <br>- menuG5OperaFSX.js ... above are the cross-frame function scripts</p>
<p>which could be found under the "script" directory of the Menu G5 package.</p>
<p>A menu page does NOT include a function script explicitly, which will be loaded by a loader script to handle browser differences.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>Frame control script : </td>
<td>
<p>Refers to one of the following scripts:<br>- menuG5F.js<br>- menuG5FX.js ... the compact version</p>
<p>which could be found under the "script" directory of the Menu G5 package.</p>
<p>The frame control script is optional for cross-frame setup, it provides shortcuts to call functions defined in the cross-frame loader script that is included in a frameset page. Usually the frame that shows the top-menu of a cross-frame menu will include the frame control script for convenience and better control.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>Non-frame menu : </td>
<td>
<p>A menu built with the non-frame loader script and the non-frame function scripts. It's not necessarily to be in a non-frame page. A framed page can have a non-frame menu.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>Cross-frame menu : </td>
<td>
<p>A menu built with the cross-frame loader script and the cross-frame function scripts. The loader script should be included in a frameset page and menus can then be built and split into any nested frame.</p>
<p>The frameset page that includes the cross-frame loader script is not necessarily to be the top frameset page, and the frame with a cross-frame menu is not necessarily to be the immediate child frame of the frameset.</p>
<p>A cross-frame menu can only be split into at most two frames. If a cross-frame menu is split into two frames, one frame will show the top-menu and usually include the frame control script, the other frame will show the sub-menus and usually doesn't need to include any Menu G5 scripts.</p>
<p>A cross-frame menu is not always split into two frames, the whole menu can be built just inside one frame.</p>
<p>A non-frame menu and a cross-frame menu can be built with the same menu content. Framed or non-framed is just the presentation, it's separated from the menu logic (the content).</p>
<p>One page can only have either non-frame menus or cross-frame menus.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>Path script : </td>
<td>
<p>For a loader script to locate a function script, the web path of the "script" directory (or the directory you created to store the function scripts) should be defined.</p>
<p>The definition could be embedded directly into the HTML page, or be put in an external JS script and included into the page. This definition should appear in a page source code prior to the loader script.</p>
<p>We usually want to overwrite some default settings in Menu G5, and for convenience of maintenance, we often use an external JS script to store the web path definition and other settings, and refer to this JS script as the path script.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>Content script : </td>
<td>
<p>To build a menu with Menu G5, we will need to define the menu content and the menu styles, then set up menu instances with the menu content and menu styles.</p>
<p>Similar to the path script, we can embed directly the definition of a menu content into the page, or put it in an external JS script then include it into the page.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>Style script : </td>
<td>
<p>Likewise, we can embed directly the definition of menu styles into the page, or put it in an external JS script then include it into the page.</p>
</td>
</tr>
<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>Instance script : </td>
<td>
<p>Again, we can embed directly the definition of the menu instances into the page, or put it in an external JS script then include it into the page.</p>
<p>It's not necessary to always separate the definitions of menu content, menu styles and menu instances into three different scripts. They can be combined into one JS script, just make sure that the content goes first, followed by the styles then the instances.</p>
</td>
</tr>
</table>
</td></tr></table>
</p>
</ul>
<a name="path"> </a>
<ul><li>Setting up the path script ... [ <a href="#top">top</a> ]</li>
<p class="para">Following are the settings we can put into a path script:</p>
<ul>
<li>Web path of the "script" directory (required):</li>
<pre>
var scriptPath="../script/";
</pre>
<p>The web path could be an absolute path or a relative path (based on the path of the page that includes the path script). It should end with a "/".</p>
<br><li>Web path of the content script (optional):</li>
<pre>
var contentScript="menu/content.js";
</pre>
<p>Instead of including it into the page manually, we can set up a "contentScript" line in the path script to have the loader script load it for us.</p>
<p>If a relative path is used, it would be based on the path of the page that includes the loader script.</p>
<br><li>Web path of the style script (optional):</li>
<pre>
var styleScript="menu/style.js";
</pre>
<p>Instead of including it into the page manually, we can set up a "styleScript" line in the path script to have the loader script load it for us.</p>
<br><li>Web path of the instance script (optional):</li>
<pre>
var instanceScript="menu/instance.js";
</pre>
<p>Instead of including it into the page manually, we can set up a "instanceScript" line in the path script to have the loader script load it for us.</p>
<br><li>Menu timer (optional):</li>
<pre>
var menuTimer=500;
</pre>
<p>The menu timer defines the delay in ms from a sub-menu item being mouseovered to its sub-menu showing up, as well as the delay from a out-of-border long menu being mouseovered to it starting to scroll in.</p>
<p>It also sets the delay from a sub-menu being mouseout to the sub-menu going off, which would be two times of the value set (that's 1000 in this case).</p>
<br><li>Floating timer (optional):</li>
<pre>
var floatTimer=100;
</pre>
<p>The floating timer defines the interval in ms for a floating menu to relocate the position, as well as the interval for a out-of-border long menu to scroll in.</p>
<br><li>Floating offset (optional):</li>
<pre>
var floatOffset=1;
</pre>
<p>The floating offset defines how fast a floating menu should move to its target position. The larger the value is set, the slower (or smoother) the menu moves.</p>
<br><li>Base z-index (optional):</li>
<pre>
var zBase=2;
</pre>
<p>The base z-index sets the minimum z-index for the menu layers, so that if you have other DHTML layers in a page, you can adjust this setting to have the menus stay on top of them.</p>
<br><li>Menu margin (optional):</li>
<pre>
var menuMargin=1;
</pre>
<p>A sub-menu will try to stay-in-view inside the browser window. The menu margin sets the margin in pixels from the browser border that a sub-menu tries to stay away.</p>
<br><li>Show message (optional):</li>
<pre>
var showMessage=1;
</pre>
<p>By default Menu G5 shows messages at the browser status bar when the menu content is parsed, or a menu instance is initialized or a menu item is mouseovered. Setting the value to 0 will disable the display of messages.</p>
<br><li>Show tooltip (optional):</li>
<pre>
var showToolTip=1;
</pre>
<p>This line would have Menu G5 show the tooltip when a menu item is mouseovered.</p>
<br><li>Inherit styles from parent menu (optional):</li>
<pre>
var inheritStyle=1;
</pre>
<p>If a sub-menu doesn't have some menu styles defined for it, it will inherit the menu styles from the parent menu.</p>
<p>In Menu G5 you can define some default menu styles. When this line is set to 0, a sub-menu without menu style would use the default styles.</p>
<br><li>Minimum item width (optional):</li>
<pre>
var minimumWidth=0;
</pre>
<p>In Menu G5, you can specify the width for menu items or let Menu G5 figure out by itself the minimum width to fit the menu items at each level of menus. When you don't specify a width and this line is set to a non-zero value, Menu G5 will not use a width less than that.</p>
<br><li>One-pixel transparent GIF (optional):</li>
<pre>
var onePixelGIF="images/my-one-pixel.gif";
</pre>
<p>Menu G5 will use a one-pixel transparent GIF file in menu rendering. The Menu G5 package comes with such a GIF file which can be found under the "script" directory. By setting up this line, you can have Menu G5 use your own one-pixel GIF file.</p>
<br><li>Base frameset (optional, for cross-frame only):</li>
<pre>
var baseFrameset=top.another_frameset;
</pre>
<p>As mentioned earlier, the frameset that includes the cross-frame loader script is not necessary to be the top frameset, we usually call this frameset the control frameset. By default the control frameset would be the base for Menu G5 to locate a target frame when a menu item is clicked. If the target frame is not nested inside the control frameset, you can set up this line to specify a frameset for Menu G5 to look for the target frame.</p>
<p>A target frame can be nested at any frameset level. If the target frame is not found, a link will be opened in a new window named with the target frame name.</p>
<br><li>Page to be loaded when browser is not supported (optional):</li>
<pre>
var nonMenuPage=URL;
</pre>
<p>When a browser not supported by Menu G5 is detected, the defined URL will be loaded.</p>
<br><li>Safari support switch (optional):</li>
<pre>
var supportSafari=0;
</pre>
<p>Put on this line when you want to turn off support of Safari.</p>
<br><li>IE/Mac support switch (optional):</li>
<pre>
var supportIEMac=0;
</pre>
<p>Put on this line when you want to turn off support of IE on Mac.</p>
</ul>
</ul>
<a name="content"> </a>
<ul><li>Setting up the content script ... [ <a href="#top">top</a> ]</li>
<p class="para">The names used in definitions of menus and sub-menus should be unique. The following function calls can be used to set up a menu content:</p>
<ul>
<li>Define a menu:</li>
<pre>
addMenu("menu-name", "top-menu-name");
</pre>
<p>More than one menu can be defined in a menu content script and each menu would start with the addMenu() call. If the "menu-name" is already defined, the addMenu() call will delete the existing menu content and re-create one from scratch.</p>
<br><li>Define a link item:</li>
<pre>
addLink("top/sub-menu-name", "item text", "item msg", "URL", "group-id");
addLink("top/sub-menu-name", "item text", "item msg", "URL", "group-id", "target-frame-name");
</pre>
<p>Usually a generic target frame can be defined with the menu instance, the second addLink() call is for cross-frame menus as a shortcut to define a target frame rather than the generic one for some links. The target frame parameter will be ignored by non-frame menus.</p>
<br><li>Define a command item:</li>
<pre>
addCommand("top/sub-menu-name", "item text", "item msg", "JS-codes", "group-id");
addLink("top/sub-menu-name", "item text", "item msg", "javascript:JS-codes", "group-id");
</pre>
<p>To open a link in a new window in non-frame menus, you can use:</p>
<pre>
addCommand("sub-menu-name", "item text", "item msg", "window.open('URL', 'window-name')", "group-id");
addLink("sub-menu-name", "item text", "item msg", "javascript:window.open('URL', 'window-name')", "group-id");
</pre>
<br><li>Define a sub-menu item:</li>
<pre>
addSubMenu("top/sub-menu-name", "item text", "item msg", "URL", "sub-menu-name", "group-id");
addSubMenu("top/sub-menu-name", "item text", "item msg", "URL", "sub-menu-name", "group-id", "target-frame-name");
</pre>
<p>The "URL" parameter is optional. If set, clicking on a sub-menu item can also launch a link.</p>
<br><li>Define an info item:</li>
<pre>
addInfo("top/sub-menu-name", "info content", "group-id");
</pre>
<p>HTML codes can be used as info content.</p>
<br><li>Define a separator item:</li>
<pre>
addSeparator("top/sub-menu-name", "group-id");
</pre>
</ul>
</ul>
<a name="style"> </a>
<ul><li>Setting up the style script ... [ <a href="#top">top</a> ]</li>
<p class="para">The following function calls can be used to set up the menu styles:</p>
<ul>
<li>Define a pad style:</li>
<pre>
addStylePad("pad-style-name", "pad-style-phrases");
</pre>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -