tree.htm

来自「精美的AJAX树形菜单」· HTM 代码 · 共 175 行

<link href = "treeStyle.css" type = "text/css" rel = "stylesheet">

<script language = "javascript" src = "utils.js"type = "text/javascript"></script>

<script language = "javascript" src = "keyboard.js"type = "text/javascript"></script>

<script language = "javascript" src = "TreeView_Kernel.js"type = "text/javascript"></script>

<script language = "javascript" src = "TreeView_Keyboard.js"type = "text/javascript"></script>

<script language = "javascript" src = "TreeView_Support.js"type = "text/javascript"></script>

<script language = "javascript" type = "text/javascript">

var ComponentArt_Storage_TreeView1=[
//编号,,子节点索引,文字,,开启状态
['p_N0',-1,[1,2,3,7,8,36,37,38,39,40,41],'邮箱','N0',true,,,,,,,,,,'images/root.gif',16,16,3,16,1,,1,1,1],
['p_N1',0,[],'Calendar','N1',,,,,,,,,,,'images/calendar.gif',16,16,3,16,1,,1,1,1],
['p_N2',0,[],'Contacts','N2',,,,,,,,,,,'images/contacts.gif',16,16,3,16,1,,1,1,1],
['p_N3',0,[4,5,6],'Deleted Items','N3',,,,,,,,,,,'images/deleted.gif',16,16,3,16,1,,,1,1,,,,,,,,,,,,,,,,,'images/margin_x.gif'],
['p_N4',3,[],'Today','N4',,,,,,,,,,,'images/deletedFolder.gif',16,16,3,16,1,,1,1,1,,,'GrayedTreeNode'],
['p_N5',3,[],'Last Week','N5',,,,,,,,,,,'images/deletedFolder.gif',16,16,3,16,1,,1,1,1,,,'GrayedTreeNode'],
['p_N6',3,[],'Last Month','N6',,,,,,,,,,,'images/deletedFolder.gif',16,16,3,16,1,,1,1,1,,,'GrayedTreeNode'],
['p_N7',0,[],'Drafts','N7',,,,,,,,,,,'images/drafts.gif',16,16,3,16,1,,1,1,1],
['p_N8',0,[9,18,27],'Inbox','N8',true,,,,,,,,,,'images/inbox.gif',16,16,3,16,1,,,1,1,,,,,,,,,,,,,,,,,'images/margin_flag.gif'],
['p_N9',8,[10,11,12,13,14,15,16,17],'ComponentArt','N9',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N10',9,[],'Admin','N10',,,,,,,,,,,,16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_flag.gif'],
['p_N11',9,[],'Alpha','N11',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N12',9,[],'Branding','N12',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N13',9,[],'Business Planning','N13',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N14',9,[],'Corporate','N14',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N15',9,[],'Finance','N15',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N16',9,[],'Other','N16',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N17',9,[],'Projects','N17',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N18',8,[19,20,21,22,23,24,25,26],'Personal','N18',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N19',18,[],'Admin','N19',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N20',18,[],'Alpha','N20',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N21',18,[],'Branding','N21',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N22',18,[],'Business Planning','N22',,,,,,,,,,,,16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_clip.gif'],
['p_N23',18,[],'Corporate','N23',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N24',18,[],'Finance','N24',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N25',18,[],'Other','N25',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N26',18,[],'Projects','N26',,,,,,,,,,,,16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_flag.gif'],
['p_N27',8,[28,29,30,31,32,33,34,35],'Miscellaneous','N27',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N28',27,[],'Admin','N28',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N29',27,[],'Alpha','N29',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N30',27,[],'Branding','N30',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N31',27,[],'Business Planning','N31',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N32',27,[],'Corporate','N32',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N33',27,[],'Finance','N33',,,,,,,,,,,,16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_exclaim.gif'],
['p_N34',27,[],'Other','N34',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N35',27,[],'Projects','N35',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N36',0,[],'Junk E-mail','N36',,,,,,,,,,,'images/junk.gif',16,16,3,16,1,,,1,1,,,,,,,,,,,,,,,,,'images/margin_down.gif'],
['p_N37',0,[],'Notes','N37',,,,,,,,,,,'images/notes.gif',16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_exclaim.gif'],
['p_N38',0,[],'Outbox','N38',,,,,,,,,,,'images/outbox.gif',16,16,3,16,1,,1,1,1],
['p_N39',0,[],'Sent Items','N39',,,,,,,,,,,'images/sentItems.gif',16,16,3,16,1,,1,1,1],
['p_N40',0,[],'Tasks','N40',,,,,,,,,,,'images/tasks.gif',16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_up.gif'],
['p_N41',0,[42,43,44],'Search Folders','N41',,,,,,,,,,,'images/search.gif',16,16,3,16,1,,1,1,1],
['p_N42',41,[],'For Follow Up','N42',,,,,,,,,,,'images/searchFolder.gif',16,16,3,16,1,,1,1,1,,,'GrayedTreeNode'],
['p_N43',41,[],'Large Mail','N43',,,,,,,,,,,'images/searchFolder.gif',16,16,3,16,1,,1,1,1,,,'GrayedTreeNode'],
['p_N44',41,[],'Unread Mail','N44',,,,,,,,,,,'images/searchFolder.gif',16,16,3,16,1,,1,1,1,,,'GrayedTreeNode'],
['p_N45',-1,[46,47,48,49],'新邮件','N45',,,,,,,,,,,,16,16,3,16,1,,1,1,1,,,,,,,,,,,,,,,,,'images/margin_clip.gif'],
['p_N46',45,[],'World','N46',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N47',45,[],'Business','N47',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N48',45,[],'Science','N48',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N49',45,[],'Weather','N49',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N50',-1,[51,52,53,54],'回复邮件','N50',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N51',50,[],'Tech','N51',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N52',50,[],'Clients','N52',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N53',50,[],'Corporate','N53',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N54',50,[],'Misc','N54',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N55',-1,[56,57,58,59,60,61],'Public Folders','N55',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N56',55,[],'Sales','N56',,,,,,,,,,,,16,16,3,16,1,,1,1,1],['p_N57',55,[],'Hiring','N57',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N58',55,[],'HR','N58',,,,,,,,,,,,16,16,3,16,1,,1,1,1],['p_N59',55,[],'Projects','N59',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N60',55,[],'Legal','N60',,,,,,,,,,,,16,16,3,16,1,,1,1,1],
['p_N61',55,[],'Marketing','N61',,,,,,,,,,,,16,16,3,16,1,,1,1,1]
]
</script>

<div id = "TreeView1_p_N3" style = "display:none;">
	<div style = "padding-left:1px;">
		<b> Deleted Items</b><font color = "blue">(121)</font>
	</div>
</div>

<div id = "TreeView1_p_N8" style = "display:none;">
	<div style = "padding-left:1px;">
		<b>Inbox</b><font color = "blue">(1)</font>
	</div>
</div>

<div id = "TreeView1_p_N36" style = "display:non;">
	<b> Junk E-mail</b><font color = "green" >[17]</font>
</div>

<div id = "TreeView1_div" class = "TreeViewMargin" style = "height:320px;width:240px;overflow:auto;"
	onscroll = "ComponentArt_RememberScrollData(this, TreeView1);"
	onclick = "if(window.TreeView1_loaded) ComponentArt_SetKeyboardFocusedTree(this, TreeView1);"
	onmouseover = "if(window.TreeView1_loaded) ComponentArt_SetActiveTree(TreeView1);"></div>

<input id = "TreeView1_SelectedNode" name = "TreeView1_SelectedNode" type = "hiddens" value = ""/>

<input id = "TreeView1_ScrollData" name = "TreeView1_ScrollData" type = "hiddens" value = "0,0"/>

<input id = "TreeView1_ExpandedList" name = "TreeView1_ExpandedList" type = "hiddens" value = ""/>

<input id = "TreeView1_MoveEvents" name = "TreeView1_MoveEvents" type = "hiddens"/>

<input id = "TreeView1_EditEvents" name = "TreeView1_EditEvents" type = "hiddens"/>

<input id = "TreeView1_ValueChangeEvents" name = "TreeView1_ValueChangeEvents" type = "hiddens"/>

<input id = "TreeView1_CheckedList" name = "TreeView1_CheckedList" type = "hiddens" value = ""/>

<a href = "#" onfocus = "ComponentArt_SetKeyboardFocusedTree(document.getElementById('TreeView1_div'), TreeView1);"
	style = "position:absolute;z-index:99;"></a>

<script language = "javascript" type = "text/javascript">
	function ComponentArt_Init_TreeView1(){
		if(!window.ComponentArt_TreeView_Kernel_Loaded
				 ||!window.ComponentArt_TreeView_Keyboard_Loaded
						 ||!window.ComponentArt_TreeView_Support_Loaded||!window.ComponentArt_Utils_Loaded){
			setTimeout('ComponentArt_Init_TreeView1()',500);
			return;
			}

		window.TreeView1=new ComponentArt_TreeView('TreeView1',ComponentArt_Storage_TreeView1);
		TreeView1.CollapseSlide=2;
		TreeView1.CollapseDuration=200;
		TreeView1.CollapseTransition=0;
		TreeView1.CollapseNodeOnSelect=true;
		TreeView1.ControlId='TreeView1';
		TreeView1.CssClass='TreeViewMargin';
		TreeView1.MarginImageHeight=20;
		TreeView1.MarginImageWidth=24;
		TreeView1.DisplayMargin=true;
		TreeView1.DragHoverExpandDelay=700;
		TreeView1.DropChildEnabled=true;
		TreeView1.DropRootEnabled=true;
		TreeView1.ExpandSlide=2;
		TreeView1.ExpandDuration=200;
		TreeView1.ExpandTransition=0;
		TreeView1.ExpandCollapseImageHeight=0;
		TreeView1.ExpandCollapseImageWidth=0;
		TreeView1.ExpandSelectedPath=true;
		TreeView1.ExpandNodeOnSelect=true;
		TreeView1.HoverNodeCssClass='HoverTreeNode';
		TreeView1.ImagesBaseUrl='images/';
		TreeView1.ItemSpacing=0;
		TreeView1.KeyboardEnabled=true;
		TreeView1.LeafNodeImageUrl='images/folder.gif';
		TreeView1.LineImageHeight=20;
		TreeView1.LineImageWidth=19;
		TreeView1.LineImagesFolderUrl='images/lines/';
		TreeView1.MarginWidth=24;
		TreeView1.NodeCssClass='TreeNode';
		TreeView1.NodeEditCssClass='NodeEdit';
		TreeView1.NodeIndent=16;
		TreeView1.ParentNodeImageUrl='images/folders.gif';
		TreeView1.ShowLines=true;
		TreeView1.SelectedNodeCssClass='SelectedTreeNode';
		TreeView1.Render('TreeView1_div');
		ComponentArt_TreeRegisterCoords(TreeView1);
		ComponentArt_SetActiveTree(TreeView1);
		ComponentArt_InitKeyboard(TreeView1);

		window.TreeView1_loaded=true;
		}
	ComponentArt_Init_TreeView1();
</script>

</body>

</html>