document.htm

来自「非常好的JAVASCRIPT树型」· HTM 代码 · 共 427 行 · 第 1/4 页

adddoc("Defining the menu structure",13," <p>The following is a general description of how to set up a menu definition file. </p> <ul> <li>The menu definition file defines the structure of folders and documents.</li> <li>Folders and documents are referred to as nodes in a tree. Folders have structure (sub-nodes) beneath them, whereas documents do not.</li> <li>This structure corresponds to the common folders and file structure of MS Windows 95/98, and the folder tree structure corresponds to the Windows Explorer tree.</li> <li>In the same way that a Windows 95/98 folder does not have to contain any files or sub-folders, a folder tree folder does not have to contain any documents or sub-folders.</li> <li>The inserts always begin with the root folder insert, followed by any order of folder and document inserts.</li> <li>The order in which folders and documents appear in the definition file defines the order in which they appear in the menu.</li> <li>When a folder or document is inserted, the containing folder is specified, using any simple identifier. By convention, identifiers aux1, aux2 etc. are used, indicating level 1, level 2 etc. This identifier is then used in subsequent menu definition statements. The same identifier can later be used to identify some other folder.</li> <li>Normally, documents do not need to be identified. However, if an individual document has special characteristics which need to be set (for eample font or images), then it need to be identified.</li> <li>The root folder, at the top level, must be identified using &quot;fT&quot;</li> <li>The easiest way to learn how to define menu structures is to look at some simple examples, as found in this documentation.</li> </ul> ")
</script>
<script>
adddoc("Menu structure details",14," <p>The detailed definition of the menu definition statements is as follows. </p> <ul> <li>The top level (root) folder insert statement is: <p><code>fT = gFld(Label, Reference, SUID) </code></p> </li> <li>The insert statement for other folders is <p><code>folderid = insFld(ContainingFolderid, gFld(Label, Reference, SUID)) </code></p> </li> <li>The insert statement for documents is normally <p><code>insFld(ContainingFolderid, gLnk(Label, Reference, SUID)) </code></p> </li> <li>Where a document needs to be identified, for example when setting individual icons or fonts, the insert statement is <p><code>docid = insFld(ContainingFolderid, gLnk(Label, Reference, SUID))</code> </p> </li> </ul> <p>where: </p> <center> <table border='0' cellpadding='5' cellspacing='0' width='100%'> <tr> <th align='left'>Name</th> <th align='left'>Mandatory/optional</th> <th align='left'>Type</th> </tr> <tr> <td colspan='3'><font color='#000000' size='2' face='Times New Roman'><em><strong>folderid</strong></em></font> is any name used to identify the folder. </td> </tr> <tr> <td>&nbsp;</td> <td>Mandatory</td> <td>Text (no quotes) </td> </tr> <tr> <td colspan='3'><font color='#000000' size='2' face='Times New Roman'><em><strong>docid</strong></em></font> is any name used to identify the document. </td> </tr> <tr> <td>&nbsp;</td> <td>Optional</td> <td>Text (no quotes)</td> </tr> <tr> <td colspan='3'><font color='#000000' size='2' face='Times New Roman'><em><strong>ContainingFolderid</strong></em></font> is the previously defined identifier of the containing folder. </td> </tr> <tr> <td>&nbsp;</td> <td>Mandatory</td> <td>String (with quotes).</td> </tr> <tr> <td colspan='3'><font color='#000000' size='2' face='Times New Roman'><em><strong>Label </strong></em></font>is the text label which appears on the menu for the folder. </td> </tr> <tr> <td>&nbsp;</td> <td>Mandatory</td> <td>String (with quotes).</td> </tr> <tr> <td colspan='3'><font color='#000000' size='2' face='Times New Roman'><em><strong>Reference </strong></em></font>is the URL reference. </td> </tr> <tr> <td>&nbsp;</td> <td>Mandatory. <br> May be set to blank. </td> <td>String (with quotes).</td> </tr> <tr> <td colspan='3'><font color='#000000' size='2' face='Times New Roman'><em><strong>SUID </strong></em></font>is the Surrogate unique identifier. This is unique number. See &lt;Performance options&gt; and &lt;Architecture&gt; for more details. </td> </tr> <tr> <td>&nbsp;</td> <td>Optional </td> <td>Integer.</td> </tr> </table> </center> ")
</script>
<script>
 adddoc("Setting default icons",15," <p>The plus/minus signs, vertical bars etc. of the tree are not held as user configurable options, although there is a description under FAQ's if you really want to change these. </p> <p>The other icons are all user configurable. Icons may be set dependng on whether folders are open or not, and whether the mouse is over them or not. Icons maybe set for individual folders or documents, and defaults may be set for folders and documents. Icons set for individual folders or documents take precedence over defaults. </p> <p>If the default icon is set to blank, and the icon for the individual node has not been set, then a blank icon will appear. This can be used, for example, so that icons are normally blank but appear when the mouse goes over the node.</p> <p>In general, you need to be careful that the font sizes are the same whether the mouse is over the node or not, as otherwise they may become distorted or chopped.</p><p>The default icons are set in the ftoptions.js file. The icons for individual folders or documents are set in the menu definition file. </p> <p>The directory path for icons may be set by changing the variable &quot;iconFolder&quot;. This specifies a relative URL path. The default value is blank. </p> <p>The default icons which may be set are: </p> <center> <table border='0' cellpadding='10' cellspacing='0' width='100%'> <tr> <th align='left'>Variable</th> <th align='left'>Default value</th> <th align='left'>Description</th> </tr> <tr> <td><nobr> topOpenFolderIcon </nobr> </td> <td>ftfo.gif </td> <td>Icon file for open top folder </td> </tr> <tr> <td><nobr> topClosedFolderIcon </nobr> </td> <td>ftfc.gif</td> <td>Icon file for closed top folder</td> </tr> <tr> <td><nobr> openFolderIcon</nobr> </td> <td>ftfo.gif</td> <td>Icon file for other open folders</td> </tr> <tr> <td><nobr> closedFolderIcon </nobr> </td> <td>ftfc.gif</td> <td>Icon file for other closed folders</td> </tr> <tr> <td><nobr> documentIcon </nobr> </td> <td>ftd.gif</td> <td>Icon file for documents</td> </tr> <tr> <td><nobr> topOpenFolderIconOver </nobr> </td> <td>ftfo.gif</td> <td>Icon file for open top folder, mouse over</td> </tr> <tr> <td><nobr> topClosedFolderIconOver </nobr> </td> <td>ftfc.gif</td> <td>Icon file for closed top folder, mouse over</td> </tr> <tr> <td><nobr> openFolderIconOver </nobr> </td> <td>ftfo.gif</td> <td>Icon file for other open folders, mouse over</td> </tr> <tr> <td><nobr> closedFolderIconOver </nobr> </td> <td>ftfc.gif</td> <td>Icon file for other closed folders, mouse over</td> </tr> <tr> <td><nobr> documentIconOver</nobr> </td> <td>ftd.gif</td> <td>Icon file for documents, mouse over</td> </tr> </table> </center> ")
</script>
<script>
adddoc("Setting node icons",16," <p>Icons may be set for individual folders or documents. Icons may be set depending on whether a folder is open or closed, and whether a mouse is over the icon or not. These are embedded in the menu definition file, using the folder or document identifier. </p> <p>To ease use, a data structure is used to hold the set of icons, and reference is then made to this data structure for individual nodes. To create the image data structure, insert calls to the function </p> <p><code>addImage(imagename,imagefile) </code></p> <p>where</p> <p>&quot;imagename&quot; is an image name (choose any unique name according to your wishes, enclosed in quotes). </p> <p>&quot;imagefile&quot; is the file name, enclosed in quotes. </p> <p>The image name is then used when specifying an image for an individual node. </p> <p>The function to set icons for a document is: </p> <p><code>docid.setIcon(iconName, iconNameOver) </code></p> <p>where</p> <p>docid is the identifier of the document, as specified in the menu definition file <br> iconName is the image name of the icon <br> iconNameOver is the image name of the icon when the mouse is over it. </p> <p>The function to set icons for a folder is: </p> <p><code>folderid.setIcon(openIcon,closedIcon, openIconOver,closedIconOver) </code></p> <p>where</p> <p>folderid is the identifier of the folder, as specified in the menu definition file <br> openIcon is the image name of the icon when the folder is open. <br> closedIcon is the image name the icon when the folder is closed. <br> openIconOver is the image name of the icon when the folder is open and the mouse is over it. <br> closedIconOver is the image name the icon when the folder is closed and the mouse is over it. <br> </p> ")
</script>
<script>
 adddoc("Setting default fonts",17," <p>Fonts are all user configurable. Fonts maybe set for individual folders or documents, level defaults may be set depending on the level in the tree structure, and overall defaults may be set for folders and documents. Icons set for individual folders or documents take precedence over level defaults which take precedence over overall defaults. </p> <p>In all cases, the variable is set to any valid HTML font tag, as a string enclosed in quotes, for example &quot;&lt;font face=Arial size=4 color=008080&gt;&quot;</p> <p>The default fonts which may be set are: </p> <center> <table border='0' cellpadding='10' cellspacing='0' width='100%'> <tr> <th align='left'>Variable</th> <th align='left'>Default value</th> <th align='left'>Description</th> </tr> <tr> <td>defFolderFont</td> <td>&quot;&lt;font&gt;&quot; </td> <td>This sets the default font for all folders. If blank or &quot;&lt;font&gt;&quot;, the browser default is used.</td> </tr> <tr> <td>defDocFont</td> <td>&quot;&quot;</td> <td>This sets the default font for all documents. If blank or &quot;&lt;font&gt;&quot;, the browser default is used.</td> </tr> <tr> <td><nobr> levelDefFont[0] </nobr> </td> <td>&quot;&quot;</td> <td>This sets the default font for all folders or documents on level 0 (the top level).</td> </tr> <tr> <td><nobr> levelDefFont[1]</nobr> </td> <td>&quot;&quot;</td> <td>This sets the default font for all folders or documents on level 1 (the level below the top level).</td> </tr> <tr> <td><nobr> levelDefFont[2]</nobr> </td> <td>&quot;&quot;</td> <td>This sets the default font for all folders or documents on level 2.</td> </tr> <tr> <td><nobr> levelDefFont[n]</nobr> </td> <td>&quot;&quot;</td> <td>Default fonts can be set for any menu level n, by setting the appropriate array element.</td> </tr> </table> </center> ")
</script>
<script>
adddoc("Setting node fonts",18," Fonts may be set for individual nodes. </p> <p>The function to set fonts for a node is: </p> <p><code>nodeid.setFont(font)</code> </p> <p>where:</p> <p>nodeid is the identifier of the node (folder or document), as specified in the menu definition file <br> font is any valid HTML for the font tag, as a string enclosed in quotes. </p> ")
</script>
<script>
 adddoc("Setting folder open state",19,"The initial open state for a folder may be set to true (open) or false (closed). The setting for an individual folder takes precedence over the overall default open state. </p> <p>The function to set a folder to be initially in the open state is: </p> <p><code>folderid.setInitial(initial) </code></p> <p>where:</p> <p>folderid is the identifier of the folder, as specified in the menu definition file <br> Initial is the initial open state. If true, the folder starts open. If false, the folder starts closed. </p> ")
</script>
<script>
adddoc("Setting node link type",20," <p>The function to set the link type for a node is: </p> <p><code>nodeid.setLinkType(linkType) </code></p> <p>where:</p> <p>nodeid is the identifier of the node (folder or document), as specified in the menu definition file <br> linkType is the link type. A value of 0 specifies the type of link. 0 for relative URL, 1 for full URL (http), 2 for full URL (ftp), 3 for full URL (telnet).</P><p> Where a value of 1, 2 or 3 is specified, the link in the node definition omits the initial http://, ftp:// or telnet://.</p> ")
</script>
<script>
adddoc("Setting node target frame",22," <p>The function to set the target frame for a node is: </p> <p><code>nodeid.setTarget(targetFrame) </code></p> <p>where:</p> <p>nodeid is the identifier of the node (folder or document), as specified in the menu definition file <br> targetFrame is the target frame. A value of 0 specifies the base frame, 1 for a new window, 2 for the overall current window. If targetFrame is set to a string, that named frame is used. </p> ")
</script>
<script>
adddoc("Setting status bar text",21," <p>The function to set the status bar text for a node is: </p> <p><code>nodeid.setStatusBar(statusText) </code></p> <p>where:</p> <p>nodeid is the identifier of the node (folder or document), as specified in the menu definition file <br> statusText is the text string, enclosed in quotes, which appears on the status bar or tool tip when the mouse is over the relevant icon. By default, the label is used. </td> ")
</script>
<script>
adddoc("Setting user defined data",61," <p>The function to set user defined data for a node is: </p> <p><code>nodeid.setUserDef(name,text) </code></p> <p>where:</p> <p>nodeid is the identifier of the node (folder or document), as specified in the menu definition file <br> name is the user defined property name, enclosed in quotes, and text is the value of the property. </td> ")
</script>
<script>
adddoc("Getting user defined data",62," <p>The function to get user defined data for a node is: </p> <p><code>nodeid.getUserDef(name) </code></p> <p>where:</p> <p>nodeid is the identifier of the node (folder or document), as specified in the menu definition file <br> name is the user defined property name, enclosed in quotes. The function returns the value of the property. </td> ")
</script>
<script>
adddoc("Style sheets",23," <p>There is a file called 'ftstyle.css'. This style sheet can be used for a multitude of purposes. By default, the background colour of the folder tree site map, as well as text decoration, is controlled from this file. The current setting is as follows:<br> <br> <code>BODY &#123;background-color: white&#125;<br> </code><br> </p> <P> This file can be used, for example, to set a background image. In this case the setting would be: <br> <br> <code>BODY &#123;BODY {background-image: url(XXX.gif)}&#125; </code><br><br>where XXX.gif is the name of the background gif file.<P>Alternatively, a new style sheet file can be created, and the option styleSheetFile changed to the new file name. This may be convenient if you need several different styles on the same web site.</p> ")
</script>
<script>
adddoc("Setup of html files",24," <p>Setup of the HTM file used to host the folder-tree script is relatively simple. Between the &lt;HEAD&gt; ... &lt;/HEAD&gt;tags, you will need to insert the following javascript calls, which employ the folder-tree scriptings. The insertions are as follows:<br> <br><pre> <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;ftstyle.css&quot;&gt;<br> &lt;script LANGUAGE=&quot;Javascript&quot; src=&quot;ftv400.js&quot;&gt;&lt;/script&gt;<br> &lt;script LANGUAGE=&quot;Javascript&quot; src=&quot;ftoptions.js&quot;&gt;&lt;/script&gt;<br> &lt;script LANGUAGE=&quot;Javascript&quot; src=&quot;mydefinitionfile.js&quot;&gt;&lt;/script&gt;<br> </code><br></pre> * it is important to use the proper path to where the *.js and *.css files reside (for the sake of this example, the files are in the root path)<br> </p> ")
</script>
<script>
adddoc("Future enhancements",25," <p>Future projects for the folder-tree script involve a graphical user interface, designed to ease the construction and implementation of the folder-tree site map. </p> ")
</script>
<script>
adddoc("Menu builder",26," <p>A grahical menu builder to create the menu structure and set options will be created. </p> ")
</script>
<script>
adddoc("JAR format",27," <p>Significant download performance improvements can be made by using the JAR format. This is normally used for Java classes, but Netscape (but, unfortunately, not Internet Explorer) can use JAR files for Javascript. </p> <p>To take advantage of this, change the script statement to: </p> <p><code>&lt;script LANGUAGE=&quot;Javascript&quot; src=&quot;mymenudef.js&quot; archive=&quot;mymenudef.jar&quot; &gt;&lt;/script&gt; </code></p> <p>The archive tag will be ignored by Internet Explorer. </p> <p>To create a JAR file, first download a Java Development Kit (JDK) from Sun. Then create a batch file (.bat) containing the statement </p> <p>jar.exe cf myfile.jar myfile.js </p> <p>This will create an unsigned JAR file. Then copy this file into the same directory as the .js file (you will need to retain the .js file to preserve support for Internet Explorer). </p> ")
</script>
<script>
adddoc("Use of suid",28," <p>The SUID is the Surrogate Unique Identifier which can be set for each node. It can be used, for example, for linking the menu to a database. There are utility functions which can retrieve this number when a node is clicked. It does not have to be unique within folder tree, but it should refer to some unique record in a database or file. </p> ")
</script>
<script>
 adddoc("Version 3 browser support",30," <P><B>Q:</B> <B>Will it work on version 3 browsers? </B> <p><B>A:</B> The folder tree version 4 script will support Internet Explorer and Netscape version 3 browsers, including Netscape Navigator 16 bit version 3. However, Internet Explorer 3 does not support the use of Java script files, and all version 3 browsers have limitations on the size of Javascript. If you want to support those users who still have these browsers, you will need to embed the Javascript into the HTML document explicitly within &lt;script&gt;&lt;/script&gt; tags. You will also need to separate out long Javascript into chunks, separated within &lt;script&gt;&lt;/script&gt; tags, so that each chunk is within the size limitation.</p> <P>The file document.htm is an example of how to provide maximum cross browser support.</P> <p>Earlier versions of browsers have limitations in the length of Javascript code, so it is unwise to have very large trees unless you separate them into chunks. Internet Explorer version 3 has a limit of 64K on the total size of Javascript in a document.</p> ")
</script>
<script>
adddoc("Can I modify the script?",31," <P><B>Q:</B> <B>Can I modify the script?</B> <p><B>A:</B>You are free to modify the script however you wish, provided the terms of the license are followed. If the modification is of general use, you are strongly recommended to submit it to Essence Associates, so that it can be considered in future development plans. It is obviously best if such modifications are clearly documented. </p> ")
</script>
<script>
adddoc("How can I change backgrounds?",32," <P><B>Q:</B> <B>How can I change the background color of the left frame (the one with the tree)? </B> <P><B>A:</B> Edit the file ftstyle.css. This file defines the CSS styles for the script. Refer to CSS documentation for more details. Alternatively, create a new style sheet file, and set the option styleSheetFile to refer to this file. An example of background style is in the main file index.html, which uses style sheet file ftEssstyle.css. ")
</script>
<script>
 adddoc("Run time options",34," <P><B>Q:</B> <B>Can I change options at run time?</B> <P><B>A:</B> Yes, options can be changed at run time. Global options can be set at any time. For example, a form can be used in the base frame to set values of the options, and the results can immediately be seen in the menu frame. However, options for individual folders need a bit of Javascript code to identify the relevant node. This capability will be fully taken advantage of in the forthcoming graphical menu builder. </p> ")
</script>
<script>
adddoc("Hour glass bug",38," <p>On Netscape Navigator, using styles to define fonts causes problems when reloading. It fails with NN4.5, but is a bit better with NN4.7. As a workaround styles are ignored for NN4.</p> ")
</script>
<script>
 adddoc("Font size bug",39," <p>If the font or icon size is set to a size larger than the icons, the tree icons (plus/minus signs, vertical bars etc.) begin to have gaps between them. </p> ")
</script>
<script>
adddoc("Example 0( default base case)",40," <p>Basic tree menu. All defaults used. <P><A href='../quick_start/ftexampl0.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../quick_start/ftexampl0.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
 adddoc("Example 1",41," <p>Menu which starts fully expanded, and with various font settings. Header and footer included. Note icons change as you move mouse over them. Not a nice user interface, but it illustrates the flexible options. </p> <P><A href='../examples/frame_trees/ftexampl1.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/frame_trees/ftexampl1.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
 adddoc("Example 2",42," <p>Simple menu without plus/minus signs. Expands/contracts as you move mouse over icons. </p> <P><A href='../examples/frame_trees/ftexampl2.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/frame_trees/ftexampl2.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
 adddoc("Example 3",43," <p>Same as example 0, but with a node specified to be open on start-up, and two nodes (Athens and United States) with a special status bar or tool tip text. </p> <P><A href='../examples/frame_trees/ftexampl3.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/frame_trees/ftexampl3.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
 adddoc("Example 4",44," <p>A large tree (over 2500 nodes) which uses the jar format. This will work on versions 4 of Internet Explorer and Netscape Navigator. The compressed jar format will only be taken advantage of with Navigator. Also illustrates uses of commonLink option, and use of Javascript code to write out details of selected node.</p> Illustrates use of dynamic downloading from web of incremental menu data, to reduce initial startup download time.<P>Performance depends on CPU speed of client machine. Download of jar file is relatively fast. </P><P>Note that most time is spent creating the data structure for the details, (see file equipdraw.js and equipform.js) rather than the menu itself.</P> <P><A href='../examples/big_trees/ftexampl4.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/big_trees/ftexampl4.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
  adddoc("Example 5",45," <p>Illustrates use of secondary storage, to manage a menu with over 20,000 nodes. The level 2 data structure <CODE>node</CODE> is populated, and this is used to dynamically populate the normal level 1 data structures. This improves performance because the <CODE>node</CODE> data structure is simpler than <CODE>folder</CODE> or <CODE>item</CODE>, and the data model for <CODE>node</CODE> takes account of the fact that the same folder or item may appear more than once in the tree structure.</p> <P><A href='../examples/big_trees/ftexampl5.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/big_trees/ftexampl5.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
  adddoc("Example 6",46," <p>Illustrates use of secondary storage, and special functions to move through data. Note this example is not complete, but is presented as an illustration.</p> <P><A href='../examples/big_trees/ftexampl6.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/big_trees/ftexampl6.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
  adddoc("Example 7",47," <p>Illustrates use of different icon to highlight the last selected node.</p> <P><A href='../examples/frame_trees/ftexampl7.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/frame_trees/ftexampl7.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
  adddoc("Example 8",48," <p>Illustrates use of no top folder displayed, and wrapping of text.</p> <P><A href='../examples/frame_trees/ftexampl8.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/frame_trees/ftexampl8.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
  adddoc("Example 9",49," <p>Illustrates use of mouseovers to expand and collapse menus, no top folder displayed, and no tree icons. This is becoming similar to standard pop up or drop down menus.</p> <P><A href='../examples/frame_trees/ftexampl9.htm' target = '_blank'>Click here to demonstrate.</A> <P><A href='javascript:parent.outputdoc(\"../examples/frame_trees/ftexampl9.js\");'>Click here to show menu definition file.</A></p> ")
</script>
<script>
  adddoc("Example 10",50," <p>Illustrates use of the same frame for the menu tree and the links.</p> <P><A href='../examples/frame_trees/ftexampl10.htm' target = '_blank'>Click here to demonstrate.</A>")
</script>
<script>
  adddoc("Example 11",51," <p>Illustrates use of the expand all and collapse all functions.</p> <P><A href='../examples/frame_trees/ftexampl11.htm' target = '_blank'>Click here to demonstrate.</A>")
</script>