TreeMenu.js
上传用户:gzy2002
上传日期:2010-02-11
资源大小:1785k
文件大小:14k
源码类别:

电子政务应用

开发平台:

Java

  1. // +-----------------------------------------------------------------------+
  2. // | Copyright (c) 2002, Richard Heyes, Harald Radi                        |
  3. // | All rights reserved.                                                  |
  4. // |                                                                       |
  5. // | Redistribution and use in source and binary forms, with or without    |
  6. // | modification, are permitted provided that the following conditions    |
  7. // | are met:                                                              |
  8. // |                                                                       |
  9. // | o Redistributions of source code must retain the above copyright      |
  10. // |   notice, this list of conditions and the following disclaimer.       |
  11. // | o Redistributions in binary form must reproduce the above copyright   |
  12. // |   notice, this list of conditions and the following disclaimer in the |
  13. // |   documentation and/or other materials provided with the distribution.| 
  14. // | o The names of the authors may not be used to endorse or promote      |
  15. // |   products derived from this software without specific prior written  |
  16. // |   permission.                                                         |
  17. // |                                                                       |
  18. // | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS   |
  19. // | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT     |
  20. // | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
  21. // | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT  |
  22. // | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
  23. // | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT      |
  24. // | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
  25. // | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
  26. // | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT   |
  27. // | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
  28. // | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.  |
  29. // |                                                                       |
  30. // +-----------------------------------------------------------------------+
  31. // | Author: Richard Heyes                                                 |
  32. // |         Harald Radi                                                   |
  33. // +-----------------------------------------------------------------------+
  34. //
  35. // $Id: TreeMenu.js,v 1.2 2003/07/24 05:27:59 wwf Exp $
  36. function TreeMenu(layer, iconpath, myname, linkTarget)
  37. {
  38. // Properties
  39. this.layer      = layer;
  40. this.iconpath   = './../../includes/javascript/images/';
  41. this.myname     = myname;
  42. this.linkTarget = 'center';
  43. this.n          = new Array();
  44. this.branches       = new Array();
  45. this.branchStatus   = new Array();
  46. this.layerRelations = new Array();
  47. this.childParents   = new Array();
  48. // Methods
  49. this.preloadImages         = preloadImages;
  50. this.drawMenu              = drawMenu;
  51. this.toggleBranch          = toggleBranch;
  52. this.swapImage             = swapImage;
  53. this.doesMenu              = doesMenu;
  54. this.doesPersistence       = doesPersistence;
  55. this.getLayer              = getLayer;
  56. this.saveExpandedStatus    = saveExpandedStatus;
  57. this.loadExpandedStatus    = loadExpandedStatus;
  58. this.resetBranches         = resetBranches;
  59. this.checkParentVisibility = checkParentVisibility;
  60. this.preloadImages();
  61. }
  62. function TreeNode(title, icon, link, expanded, isDynamic)
  63. {
  64. this.title     = title;
  65. this.icon      = icon;
  66. this.link      = link;
  67. this.expanded  = expanded;
  68. this.isDynamic = isDynamic;
  69. this.n         = new Array();
  70. }
  71. /**
  72. * Preload images hack for CrapZilla
  73. */
  74. function preloadImages()
  75. {
  76. var plustop    = new Image; plustop.src    = this.iconpath + '/plustop.gif';
  77. var plusbottom = new Image; plusbottom.src = this.iconpath + '/plusbottom.gif';
  78. var plus       = new Image; plus.src       = this.iconpath + '/plus.gif';
  79. var minustop    = new Image; minustop.src    = this.iconpath + '/minustop.gif';
  80. var minusbottom = new Image; minusbottom.src = this.iconpath + '/minusbottom.gif';
  81. var minus       = new Image; minus.src       = this.iconpath + '/minus.gif';
  82. var branchtop    = new Image; branchtop.src    = this.iconpath + '/branchtop.gif';
  83. var branchbottom = new Image; branchbottom.src = this.iconpath + '/branchbottom.gif';
  84. var branch       = new Image; branch.src       = this.iconpath + '/branch.gif';
  85. var linebottom = new Image; linebottom.src = this.iconpath + '/linebottom.gif';
  86. var line       = new Image; line.src       = this.iconpath + '/line.gif';
  87. }
  88. /**
  89. * Main function that draws the menu and assigns it
  90. * to the layer (or document.write()s it)
  91. */
  92. function drawMenu()// OPTIONAL ARGS: nodes = [], level = [], prepend = '', expanded = false, visbility = 'inline', parentLayerID = null
  93. {
  94. /**
  95.     * Necessary variables
  96.     */
  97. var output        = '';
  98. var modifier      = '';
  99. var layerID       = '';
  100. var parentLayerID = '';
  101. /**
  102.     * Parse any optional arguments
  103.     */
  104. var nodes         = arguments[0] ? arguments[0] : this.n
  105. var level         = arguments[1] ? arguments[1] : [];
  106. var prepend       = arguments[2] ? arguments[2] : '';
  107. var expanded      = arguments[3] ? arguments[3] : false;
  108. var visibility    = arguments[4] ? arguments[4] : 'inline';
  109. var parentLayerID = arguments[5] ? arguments[5] : null;
  110. var currentlevel  = level.length;
  111. for (var i=0; i<nodes.length; i++) {
  112. level[currentlevel] = i+1;
  113. layerID = this.layer + '_' + 'node_' + implode('_', level);
  114. /**
  115.         * Store the child/parent relationship
  116.         */
  117. this.childParents[layerID] = parentLayerID;
  118. /**
  119.         * Gif modifier
  120.         */
  121. if (i == 0 && parentLayerID == null) {
  122. modifier = nodes.length > 1 ? "top" : 'single';
  123. } else if(i == (nodes.length-1)) {
  124. modifier = "bottom";
  125. } else {
  126. modifier = "";
  127. }
  128. /**
  129.         * Single root branch is always expanded
  130.         */
  131. if (!doesMenu() || (parentLayerID == null && nodes.length == 1)) {
  132. expanded = true;
  133. } else if (nodes[i].expanded) {
  134. expanded = true;
  135. } else {
  136. expanded = false;
  137. }
  138. /**
  139.         * Setup branch status and build an indexed array
  140. * of branch layer ids
  141.         */
  142. if (nodes[i].n.length > 0) {
  143. this.branchStatus[layerID] = expanded;
  144. this.branches[this.branches.length] = layerID;
  145. }
  146. /**
  147.         * Setup toggle relationship
  148.         */
  149. if (!this.layerRelations[parentLayerID]) {
  150. this.layerRelations[parentLayerID] = new Array();
  151. }
  152. this.layerRelations[parentLayerID][this.layerRelations[parentLayerID].length] = layerID;
  153. /**
  154.         * Branch images
  155.         */
  156. var gifname = nodes[i].n.length && this.doesMenu() && nodes[i].isDynamic ? (expanded ? 'minus' : 'plus') : 'branch';
  157. var iconimg = nodes[i].icon ? sprintf('<img src="%s/%s" width="20" height="20" align="top">', this.iconpath, nodes[i].icon) : '';
  158. /**
  159.         * Build the html to write to the document
  160.         */
  161. var divTag    = sprintf('<div id="%s" style="display: %s; behavior: url(#default#userdata)">', layerID, visibility);
  162. var onMDown   = doesMenu() && nodes[i].n.length  && nodes[i].isDynamic ? sprintf('onmousedown="%s.toggleBranch('%s', true)" style="cursor: pointer; cursor: hand"', this.myname, layerID) : '';
  163. var imgTag    = sprintf('<img src="%s/%s%s.gif" width="20" height="20" align="top" border="0" name="img_%s" %s />', this.iconpath, gifname, modifier, layerID, onMDown);
  164. var linkStart = nodes[i].link ? sprintf('<a href="%s" target="%s">', nodes[i].link, this.linkTarget) : '';
  165. var linkEnd   = nodes[i].link ? '</a>' : '';
  166. output = sprintf('%s<nobr>%s%s%s%s%s%s</nobr><br></div>',
  167.                   divTag,
  168.   prepend,
  169.                   parentLayerID == null && nodes.length == 1 ? '' : imgTag,
  170.   iconimg,
  171.   linkStart,
  172.   nodes[i].title,
  173.   linkEnd);
  174. /**
  175.         * Write out the HTML. Uses document.write for speed over layers and
  176. * innerHTML. This however means no dynamic adding/removing nodes on
  177. * the client side. This could be conditional I guess if dynamic
  178. * adding/removing is required.
  179.         */
  180. if (this.doesMenu()) {
  181. //this.getLayer(this.layer).innerHTML += output
  182. document.write(output);
  183. } else {
  184. document.write(output);
  185. }
  186. /**
  187.         * Traverse sub nodes ?
  188.         */
  189. if (nodes[i].n.length) {
  190. /**
  191.             * Determine what to prepend. If there is only one root
  192. * node then the prepend to pass to children is nothing.
  193. * Otherwise it depends on where we are in the tree.
  194.             */
  195. if (parentLayerID == null && nodes.length == 1) {
  196. var newPrepend = '';
  197. } else if (i < (nodes.length - 1)) {
  198. var newPrepend = prepend + sprintf('<img src="%s/line.gif" width="20" height="20" align="top">', this.iconpath);
  199. } else {
  200. var newPrepend = prepend + sprintf('<img src="%s/linebottom.gif" width="20" height="20" align="top">', this.iconpath);
  201. }
  202. this.drawMenu(nodes[i].n,
  203.               explode('_', implode('_', level)), // Seemingly necessary to enforce passing by value
  204.               newPrepend,
  205.               nodes[i].expanded,
  206.               expanded ? 'inline' : 'none',
  207.               layerID);
  208. }
  209. }
  210. }
  211. function toggleBranch(layerID, updateStatus) // OPTIONAL ARGS: noSave = false
  212. {
  213. var currentDisplay = this.getLayer(layerID).style.display;
  214. var newDisplay     = (this.branchStatus[layerID] && currentDisplay == 'inline') ? 'none' : 'inline'
  215. for (var i=0; i<this.layerRelations[layerID].length; i++) {
  216. if (this.branchStatus[this.layerRelations[layerID][i]]) {
  217. this.toggleBranch(this.layerRelations[layerID][i], false);
  218. }
  219. this.getLayer(this.layerRelations[layerID][i]).style.display = newDisplay;
  220. }
  221. if (updateStatus) {
  222. this.branchStatus[layerID] = !this.branchStatus[layerID];
  223. /**
  224.         * Persistence
  225.         */
  226. if (this.doesPersistence() && !arguments[2]) {
  227. this.saveExpandedStatus(layerID, this.branchStatus[layerID]);
  228. }
  229. // Swap image
  230. this.swapImage(layerID);
  231. }
  232. }
  233. /**
  234. * Swaps the plus/minus branch images
  235. */
  236. function swapImage(layerID)
  237. {
  238. imgSrc = document.images['img_' + layerID].src;
  239. re = /^(.*)(plus|minus)(bottom|top|single)?.gif$/
  240. if (matches = imgSrc.match(re)) {
  241. document.images['img_' + layerID].src = sprintf('%s%s%s%s',
  242.                                                 matches[1],
  243. matches[2] == 'plus' ? 'minus' : 'plus',
  244. matches[3] ? matches[3] : '',
  245. '.gif');
  246. }
  247. }
  248. /**
  249. * Can the browser handle the dynamic menu?
  250. */
  251. function doesMenu()
  252. {
  253. return (is_ie5up || is_nav6up || is_gecko);
  254. }
  255. /**
  256. * Can the browser handle save the branch status
  257. */
  258. function doesPersistence()
  259. {
  260. return is_ie5up;
  261. }
  262. /**
  263. * Returns the appropriate layer accessor
  264. */
  265. function getLayer(layerID)
  266. {
  267. if (document.getElementById(layerID)) {
  268. return document.getElementById(layerID);
  269. } else if (document.all(layerID)) {
  270. return document.all(layerID);
  271. }
  272. }
  273. /**
  274. * Save the status of the layer
  275. */
  276. function saveExpandedStatus(layerID, expanded)
  277. {
  278. document.all(layerID).setAttribute("expandedStatus", expanded);
  279. document.all(layerID).save(layerID);
  280. }
  281. /**
  282. * Load the status of the layer
  283. */
  284. function loadExpandedStatus(layerID)
  285. {
  286. document.all(layerID).load(layerID);
  287. if (val = document.all(layerID).getAttribute("expandedStatus")) {
  288. return val;
  289. } else {
  290. return null;
  291. }
  292. }
  293. /**
  294. * Reset branch status
  295. */
  296. function resetBranches()
  297. {
  298. if (!this.doesPersistence()) {
  299. return false;
  300. }
  301. for (var i=0; i<this.branches.length; i++) {
  302. var status = this.loadExpandedStatus(this.branches[i]);
  303. // Only update if it's supposed to be expanded and it's not already
  304. if (status == 'true' && this.branchStatus[this.branches[i]] != true) {
  305. if (this.checkParentVisibility(this.branches[i])) {
  306. this.toggleBranch(this.branches[i], true, true);
  307. } else {
  308. this.branchStatus[this.branches[i]] = true;
  309. this.swapImage(this.branches[i]);
  310. }
  311. }
  312. }
  313. }
  314. /**
  315. * Checks whether a branch should be open 
  316. * or not based on its parents' status
  317. */
  318. function checkParentVisibility(layerID)
  319. {
  320. if (in_array(this.childParents[layerID], this.branches)
  321.     && this.branchStatus[this.childParents[layerID]]
  322. && this.checkParentVisibility(this.childParents[layerID]) ) {
  323. return true;
  324. } else if (this.childParents[layerID] == null) {
  325. return true;
  326. }
  327. return false;
  328. /*
  329. if (this.childParents[layerID] == null) {
  330. return this.branchStatus[layerID];
  331. } else {
  332. return this.branchStatus && this.checkVisibility(this.childParents[layerID]);
  333. }
  334. */
  335. }
  336. /**
  337. * Javascript mini implementation of sprintf()
  338. */
  339. function sprintf(strInput)
  340. {
  341. var strOutput  = '';
  342. var currentArg = 1;
  343. for (var i=0; i<strInput.length; i++) {
  344. if (strInput.charAt(i) == '%' && i != (strInput.length - 1) && typeof(arguments[currentArg]) != 'undefined') {
  345. switch (strInput.charAt(++i)) {
  346. case 's':
  347. strOutput += arguments[currentArg];
  348. break;
  349. case '%':
  350. strOutput += '%';
  351. break;
  352. }
  353. currentArg++;
  354. } else {
  355. strOutput += strInput.charAt(i);
  356. }
  357. }
  358. return strOutput;
  359. }
  360. function explode(seperator, input)
  361. {
  362. var output = [];
  363. var tmp    = '';
  364. skipEmpty  = arguments[2] ? true : false;
  365. for (var i=0; i<input.length; i++) {
  366. if (input.charAt(i) == seperator) {
  367. if (tmp == '' && skipEmpty) {
  368. continue;
  369. } else {
  370. output[output.length] = tmp;
  371. tmp = '';
  372. }
  373. } else {
  374. tmp += input.charAt(i);
  375. }
  376. }
  377. if (tmp != '' || !skipEmpty) {
  378. output[output.length] = tmp;
  379. }
  380. return output;
  381. }
  382. function implode(seperator, input)
  383. {
  384. var output = '';
  385. for (var i=0; i<input.length; i++) {
  386. if (i == 0) {
  387. output += input[i];
  388. } else {
  389. output += seperator + input[i];
  390. }
  391. }
  392. return output;
  393. }
  394. function in_array(item, arr)
  395. {
  396. for (var i=0; i<arr.length; i++) {
  397. if (arr[i] == item) {
  398. return true;
  399. }
  400. }
  401. return false;
  402. }