document.htm

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

	      insDoc(aux1, gLnk("Setting other options", "\"otheroptions.htm\" )"))
 		insDoc(aux1, gLnk("Style sheets", "23)"))
		insDoc(aux1, gLnk("Setting up HTML files", "24)"))
   aux1 = insFld(fT, gFld("Future enhancements", "25)"))
 		insDoc(aux1, gLnk("GUI menu builder", "26)"))
    aux1 = insFld(fT, gFld("Performance options", ""))
		insDoc(aux1, gLnk(".jar files", "27)"))
 		insDoc(aux1, gLnk("Using the SUID", "28)"))
    aux1 = insFld(fT, gFld("Frequently asked questions", ""))
 		insDoc(aux1, gLnk("Will it work on version 3 browsers?", "30)"))
		insDoc(aux1, gLnk("Can I modify the script?", "31)"))
		insDoc(aux1, gLnk("How can I change backgrounds?", "32)"))
 		insDoc(aux1, gLnk("Can I change options at run time?", "34)"))
		insDoc(aux1, gLnk("How do I migrate from version 2?", "\"migrating.htm\" )"))
     aux1 = insFld(fT, gFld("Known bugs", ""))
 		insDoc(aux1, gLnk("Styles in Navigator", "38)"))
  		insDoc(aux1, gLnk("Gaps in tree icons", "39)"))
   aux1 = insFld(fT, gFld("Examples", ""))
 		insDoc(aux1, gLnk("Example 0 (default)", "40)"))
      	insDoc(aux1, gLnk("Open expanded, with header and footer", "41)"))
		insDoc(aux1, gLnk("No tree icons", "42)"))
		insDoc(aux1, gLnk("Specific node open", "43)"))
		insDoc(aux1, gLnk("Large tree. Dynamic loading", "44)"))
		insDoc(aux1, gLnk("Very large tree with secondary storage", "45)"))
		insDoc(aux1, gLnk("Scrolling through large tree", "46)"))
		insDoc(aux1, gLnk("Highlight selected node", "47)"))
		insDoc(aux1, gLnk("No top node and text wrapping", "48)"))
		insDoc(aux1, gLnk("Mouseover expand and collapse", "49)"))
		insDoc(aux1, gLnk("Tree and target in same frame", "50)"))
		insDoc(aux1, gLnk("Expand and collapse all", "51)"))
		insDoc(aux1, gLnk("Checkboxes", "52)"))
		insDoc(aux1, gLnk("No frames", "53)"))
		insDoc(aux1, gLnk("Tree in table cell", "54)"))
		insDoc(aux1, gLnk("Reposition", "55)"))
		insDoc(aux1, gLnk("Complex frames", "56)"))
		insDoc(aux1, gLnk("Lots of nodes within one folder", "80)"))
		insDoc(aux1, gLnk("Setting state from another frame", "81)"))
		insDoc(aux1, gLnk("Opening link in window", "82)"))
		insDoc(aux1, gLnk("Complex set of frames and menus", "83)"))
		insDoc(aux1, gLnk("Radio buttons on specified nodes", "84)"))
		insDoc(aux1, gLnk("More complex checkboxes", "85)"))
		insDoc(aux1, gLnk("Setting target for specified node", "86)"))
		insDoc(aux1, gLnk("Frameless menu with checkboxes", "87)"))
		insDoc(aux1, gLnk("Frameless menu", "88)"))
		insDoc(aux1, gLnk("Frameless menu within table", "89)"))
		insDoc(aux1, gLnk("Right to left tree", "90)"))
		insDoc(aux1, gLnk("Horizontal cascading menu", "91)"))
		insDoc(aux1, gLnk("Horizontal cascading menu with background images", "92)"))
		insDoc(aux1, gLnk("Vertical cascading menu", "93)"))
		insDoc(aux1, gLnk("Vertical cascading menu with background images", "94)"))
   aux1 = insFld(fT, gFld("Other Examples", ""))
		insDoc(aux1, gLnk("Web Explorer example", "63)"))
		insDoc(aux1, gLnk("Database example", "95)"))

 aux1 = insFld(fT, gFld("Version history", ""))
 		insDoc(aux1, gLnk("Version 4.00", "70)"))
 		insDoc(aux1, gLnk("Version 4.01", "71)"))
 		insDoc(aux1, gLnk("Version 4.02", "72)"))
 		insDoc(aux1, gLnk("Version 4.03", "73)"))
 		insDoc(aux1, gLnk("Version 4.04", "\"readme404.txt\")"))
 		insDoc(aux1, gLnk("Version 4.05", "\"readme405.txt\")"))
 		insDoc(aux1, gLnk("Version 4.06", "\"readme406.txt\")"))
 		insDoc(aux1, gLnk("Version 4.50", "\"readme450.txt\")"))
 		insDoc(aux1, gLnk("Version 4.60", "\"readme460.txt\")"))
 		insDoc(aux1, gLnk("Version 4.70", "\"readme470.txt\")"))
 		insDoc(aux1, gLnk("Version 5.00", "\"readme500.txt\")"))
 		insDoc(aux1, gLnk("Version 5.10", "\"readme510.txt\")"))

  aux1 = insFld(fT, gFld("Licenses", ""))
		insDoc(aux1, gLnk("Evaluation License", "\"../licenses/evallicense.txt\" )"))
 		insDoc(aux1, gLnk("Full License", "\"../licenses/fulllicense.txt\" )"))
 		insDoc(aux1, gLnk("Developer License", "\"../licenses/devlicense.txt\" )"))
</script>
<script>
adddoc("Quick start",1," After downloading the file ft.zip, unzip it into a new folder. You will have to edit files to create your own tree. You should only try this if you have at least some programming skills, although knowledge of Javascript is useful. <OL> <LI>After unzipping all the files, copy the following files into the area where you will be creating your web page: <UL> <LI>ftb.gif</LI> <LI>ftd.gif</LI> <LI>ftdo.gif</LI><LI>ftfc.gif</LI> <LI>ftfo.gif</LI><LI>ftvl.gif</LI> <LI>ftn.gif</LI> <LI>ftfn.gif</LI><LI>ftln.gif</LI><LI>ftmn.gif</LI>  <LI>ftmfn.gif</LI>  <LI>ftmln.gif</LI> <LI>ftpn.gif</LI>  <LI>ftpfn.gif</LI> <LI>ftpln.gif</LI> <LI>ftoptions.js</LI> <LI>ftstyle.css</LI> <LI>ft.js</LI> <LI>ftexampl0.htm</LI> <LI>ftblank.htm</LI> <LI>ftexampl0.js</LI> </UL> <LI> Start by looking at the HTML file ftexampl0.htm <LI> You only need to edit two files: ftexampl0.js and ftexampl0.htm itself.</LI> <LI> If you want the names of the folders and documents to be links themselves, include</LI> <OL><TT>useTextLinks = 1</TT></OL> at the top of the file. <LI> Edit ftexampl0.js with your folder and document names and links. Start with the root folder with the command fT = gFld('Some text','linkURL').&nbsp; 'gFld' takes a name and and optional URL, and returns the folder.<BR> Place a folder inside another folder by using the function 'insFld([parent folder], [child folder])'.</LI> <LI> To create a document link use the function 'gLnk'. It takes two arguments:</LI> <BR>&nbsp;&nbsp;&nbsp;&nbsp; Title: Text to be displayed in the tree. <BR>&nbsp;&nbsp;&nbsp;&nbsp; Link: URL of the document <P>To place the document inside the tree use the function 'insDoc([parent folder], [document link])'. <LI> If you want to rename this or any other of the files included in the .ZIP, you will have to take in account the file dependencies: ftexampl0.htm includes ftbase.htm, ftstyle.css, ft.js, and ftoptions.js .</LI> <LI>ftoptions.js contains the user definable options. Either change values in this file, or (preferred), specify the altered values at the top of the menu definition file.</LI><LI>Have a look at the other examples, and examine their .js menu definition files.</LI> </OL> <P>When you're done with the installation process and your site goes public, <b>please don't forget to announce the site</B>. Share the URL with other developers and join the email group. ")
</script>
<script>
adddoc("Background",2,"<p>In 1997, Marcelino Martins (http://www.geocities.com/Paris/LeftBank/2178/) published a simple, well designed Javascript utility, Folder Tree Version 1, which provided web page designers the ability to produce tree structured menus. This was architected so that, as nodes were collapsed or expanded, the complete tree was rewritten. This supported version 3 or later of Internet Explorer or Netscape Navigator.</p> <p>This was rewritten by Marcelino Martins to take advantage of the emerging DHTML capability of Internet Explorer and Netscape Navigator browsers, so that as nodes were collapsed or expanded, the relevant parts of the tree were made visible or invisible. This became version 2. This supported version 4 or later of Internet Explorer or Netscape Navigator. </p> <p>Towards the end of 1998, Nigel Goodwin of Essence Associates Ltd. re - architected version 2 the Folder Tree script to greatly improve performance for large trees. This, in some cases, resulted in performance improvements of over a hundredfold. Some features were available, but not documented, so were only used by the author. </p> <p>At about the same time, Roger Bedard of CompSolutions-CSI (http://www.CompSolutions-CSI.com) also modified version 2, and added many options to allow much more configurability to the style, and look and feel, of the script. This became version 3e. </p> <p>It became clear that a version of folder tree which combined the performance improvements and the greater configurability of the look and feel would be a very useful product which could be widely used It also became clear that, if the script was to be widely used, a significant amount of effort would be needed to support and promote it, as well as continue to enhance it. </p> <p>Essence Associates therefore, with the support and cooperation of Marcelino Martins and Roger Bedard, decided to produce the first commercial release, version 4, which combines the best features of previous versions. This was released in March 1999. </p> <p>In addition to the previous performance improvements, and the look and feel improvements, this version 4 of folder tree also provided support for version 3 or later of Internet Explorer or Netscape Navigator (whilst transparently taking advantage of DHTML capabilities of later versions), corrected various bugs, added a few extra look and feel features, and was designed to be fully supported and documented. </p> <p>The script is ideal for both intranet and internet site navigation. The folder-tree structure displays a navigational map that gives the professional look and feel of Windows Explorer. The script also makes use of the latest Javascript and DHTML technologies, but is intelligent enough to work with older browsers which do not support DHTML. </p> ")
</script>
<script>
adddoc("Browser support",3," <p>Folder tree has been tested on Internet Explorer versions 3 and 4, and Netscape Navigator versions 3 (16 bit), 3.04 (32 bit), 4.01, 4.5, 6.0 and 6.2. It has been tested on PC, MacIntosh and UNIX platforms. </p> ")
</script>
<script>
adddoc("Configurability",4," <ul> <li>customization of individual folder images</li> <li>customization of individual document images</li> <li>individual control of&nbsp; (+/-) sign images, folder images, folder text, document images, and document text</li> <li>control of mouse-click and mouse-over behavior</li> <li>option to enable the collapsing of previous branches when accessing new branches</li> <li>ability to specify text which appears on status bar or in tool tip</li> <li>option to control the initial state (expanded/collapsed) of the tree, including individual nodes</li> <li>option to include a header or footer at the beginning or end of the tree. This might be, for example, a company logo or advertisement</li> <li>control of the font behavior of the route folder, all sub-folders, and all documents</li> <li>various bug fixes, such as the window size and refresh bugs for Netscape</li> <li>flexible management of customisable images</li> <li>performance enhancements</li> <li>hooks for database access or secondary cache storage, for very large trees</li> </ul> ")
</script>
<script>
 adddoc("Applications",5," <p>There is a wide variety of applications which can make use of folder tree. Often, web sites contain a host of interlinking pages, and it can become very difficult to follow the structure. User become lost. In other cases, there is a large catalogue of database information, which is difficult to manage and manipulate. </p> <p>In fact, almost every web site has some menu, and folder tree is designed to make the creation of these menus easy and trouble free. Whereas, even in web page design tools, a lot of the menu creation still has to be hand crafted, by using folder tree you can very quickly generate a fully functioning and, most importantly, consistent looking menu structure. </p> <p>In some cases, search facilities, and site navigation charts, can try to alleviate these problems, but a proper solution requires some structured navigation tool which users are familiar with. This is what folder tree can give you. </p> <p>Folder tree can help in </p> <ul> <li>web site navigation</li> <li>indexing of large documents</li> <li>cataloguing, for example document catalogues or spare parts catalogues</li> </ul> ")
</script>
<script>
 adddoc("Performance",6," <P>Very rough indicative benchmarks are as follows. The timings are for the initial loading, use a local server, and are based on a 133MHz Pentium II processor. </p> <P>The original version 2 took 60 secs to load a menu of 120 nodes. The new version 4 takes about 5 secs to load 500 nodes. </p> <P>Using special data structures described in the documentation, version 4 takes about 10 seconds to load a tree structure consisting of over 20,000 nodes. </p> <P>More information on performance can be found in the section headed 'performance options'. </p> <P>Performance depends critically on speed of the local client processor. Once the menu definition file and other files have been downloaded at the start, there should be little if any server acess during menu manipulation. </p> ")
</script>
<script>
 adddoc("Limitations",7," <p>The author is not aware of any limitations, apart from those imposed by the supporting browser and client hardware. There is no imposed limit on the size of tree. Trees have been successfully implemented with over 20,000 nodes. </p> ")
</script>
<script>
adddoc("Audience",8,"<P>The main audience for this script is web ages designers who have at least some programming excperience") 
</script>
<script>
adddoc("Reference sites",9," <p>The following sites are using folder tree (this version and previous versions): </p> <ul> <li><a href='http://www.essence.co.uk/essence/WIME'>Essence Associates</a></li> </ul> ")
</script>
<script>
bstrbuf = "<p>The architecture is designed to take advantage of DHTML capabilities where they are supported, and to take account of various performance issues. </p> <p>The performance issues are: </p> <ul> <li>There is a large overhead for each server access. It is best to retrieve data in significant amounts each time the server is accessed.</li> <li>There is a large performance overhead for creating the DHTML objects and drawing them.</li> <li>Loading Javascript data structures is a relatively fast process.</li> <li>With increasing CPU performance, more burden should be put on the local client rather than the network link.</li> <li>Users do not mind a short (less than a second) delay when a node is expanded/collapsed, but they do mind a long delay before any menu appears</li> <li>For very large trees, users are unlikely to want to see more than a small proportion of the complete tree.</li> </ul> <p>To understand the architecture, it is necessary to understand that data about the menu tree can be held at various different levels. </p> <ul> <li>Level 0. This is the level internal to the browser, which controls DHTML objects in the Document Object Model. These objects can be manipulated by Javascript. For example, a branch in the tree can be held as an object, and Javascript controls whether they are visible or not by manipulating these objects. These objects are populated, from the level 1 data structure, on an as-needed basis. </li> <li>Level 1. This is the primary data structure managed by the folder tree Javascript. The data structures are defined in the constructor foldertree functions &quot;Folder&quot; and &quot;Item&quot;. These structures are fully populated at start-up using the menu definition file.</li> <li>Level 2. This is the secondary data structure, which might be managed by some user-written functions. "
bstrbuf += "It could be wrtten using Javascript, Java or some other language. It could involve some database access. It could be held locally on the client, or onthe server. There is a function in folder tree &quot;addToTree&quot; which can be adapted by the user. This function is called when a folder is clicked open but there are no child nodes. The clicked folder identifier is passed as an argument, the SUID for the clicked folder is obtained, the relevant subnodes are obtained, and suitable calls to insFld and insDoc are made to add nodes to the level 1 (primary) data structure. More discussion of level 2 data structures may be found under &quot;Performance options&quot;.</li> </ul> <p>At start up, the level 1 data structure is populated, as well as, if used, the level 2 data structure. Then the correct DHTML objects are created for the initial state of the tree. As the user expands and contracts the tree, if possible the DHTML objects are used, but if they have not yet been written the level 1 data structure is used to create them. If the data is not in the level 1, the level 2 data structure is searched, and level 1 data structures are extended. </p> <p>If a node is expanded or contracted, and the  DHTML objects already exist, the response is almost instantaneous. If level 1 data structures are used, the rersponse is normally very fast, as only the new sub-nodes have to be drawn. The new nodes are inserted into the existing DHTML objects. Note - Internet Explorer and Netscape Navigator use very different methods for inserting new DHTML elements. Internet Explorer automatically adjusts the position of surrounding elements, whereas in Navigator this has to be performed using Javascript. </p> <p>For version 3 of Internet Explorer and Netscape Navigator, DHTML objects are not available, so level 0 data structures do not exist. Instead, as the user expands and collapses, the visible part of the tree is redrawn from scratch. This still gives quite good performance, as the complete fully expanded tree does not have to be drawn. </p> "
adddoc("Architecture",12,bstrbuf)
</script>
<script>