📄 demo_json.html

📁 Absolutely wonderful features you may never imagine before, Skytree v2.0 takes you into a new era of
💻 HTML
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SkyTree v2.0 Demo - Configuration &amp; JSON</title>
<link href="Demo.css" rel="stylesheet" type="text/css" />
<link href="../Theme/Default/Tree.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="../Script/SkyTree.js"></script>
<script language="javascript" type="text/javascript" src="Demo.js"></script>
</head>

<body>
<h3>Skytree v2.0 Demo</h3>
<h4>Configuration &amp; JSON </h4>
<div class="Note"><span class="HighLight">Configuration</span> object helps programmers avoid writing code, instead, they could make trees like building block. This demo show you how to make a tree with in only <strong>2 lines</strong>, and throw structure and tree data into a configuation file. <br />
<span class="HighLight">JSON</span>(Javascript Object Notation) is supported by SkyTree v2.0 to store node structure and data. To view more about JSON, <a href="http://www.json.org/" target="_blank">click here</a>. </div>
<div id="Demo"></div>
<div><input id="showCode" name="showCode" type="checkbox" onclick="with(document.getElementById('Code')){style.display=this.checked?'':'none';}"><label for="showCode">Click here to view code for the tree above.</label></div>
<div id="Code" style="display:none;"><pre><img src="Images/Code_JSON.gif" /></pre></div>
<div><input id="showJSON" name="showJSON" type="checkbox" onclick="with(document.getElementById('JSON')){style.display=this.checked?'':'none';}">
<label for="showJSON">Click here to view <strong>Configuration</strong> for the tree above.</label>
</div>
<div id="JSON" style="display:none;"><pre>
var <strong>dataJSON</strong> = {
items:[
	{
		text:'Personal Folders',
		iExp:'../Images/Menu/oMailbox.gif',
		iCol:'../Images/Menu/oMailbox.gif',
		iLeaf:'../Images/Menu/oMailbox.gif',
		items:[
		{
			text:'Deleted Items(6)',
			iExp:'../Images/Menu/oRecycle.gif',
			iCol:'../Images/Menu/oRecycle.gif',
			iLeaf:'../Images/Menu/oRecycle.gif',
			value:'Deleted Items'
		}
		,
		{
			text:'Drafts',
			iExp:'../Images/Menu/oDrafts.gif',
			iCol:'../Images/Menu/oDrafts.gif',
			iLeaf:'../Images/Menu/oDrafts.gif',
			value:'Drafts'
		}
		,
		{
			text:'Inbox(14)',
			iExp:'../Images/Menu/oInbox.gif',
			iCol:'../Images/Menu/oInbox.gif',
			iLeaf:'../Images/Menu/oInbox.gif',
			items:[
			{
				text:'Invoices',
				iExp:'../Images/Menu/folder.gif',
				iCol:'../Images/Menu/folder.gif',
				iLeaf:'../Images/Menu/folder.gif',
				value:'Invoices'
			}],
			value:'Inbox'
		}
		,
		{
			text:'Junk E-mail',
			iExp:'../Images/Menu/folder.gif',
			iCol:'../Images/Menu/folder.gif',
			iLeaf:'../Images/Menu/folder.gif',
			value:'Junk E-mail'
		}
		,
		{
			text:'Outbox',
			iExp:'../Images/Menu/oOutlook.gif',
			iCol:'../Images/Menu/oOutlook.gif',
			iLeaf:'../Images/Menu/oOutlook.gif',
			value:'Outbox'
		}
		,
		{
			text:'Sent Items',
			iExp:'../Images/Menu/oSent.gif',
			iCol:'../Images/Menu/oSent.gif',
			iLeaf:'../Images/Menu/oSent.gif',
			value:'Sent Items'
		}
		,
		{
			text:'Search Folders',
			iExp:'../Images/Menu/oSearch.gif',
			iCol:'../Images/Menu/oSearch.gif',
			iLeaf:'../Images/Menu/oSearch.gif',
			items:[
			{
				text:'Form Follow Up',
				iExp:'../Images/Menu/oSearchF.gif',
				iCol:'../Images/Menu/oSearchF.gif',
				iLeaf:'../Images/Menu/oSearchF.gif',
				value:'Form Follow Up'
			}
			,
			{
				text:'Large Mail',
				iExp:'../Images/Menu/oSearchF.gif',
				iCol:'../Images/Menu/oSearchF.gif',
				iLeaf:'../Images/Menu/oSearchF.gif',
				value:'Large Mail'
			}
			,
			{
				text:'Unread Mail',
				iExp:'../Images/Menu/oSearchF.gif',
				iCol:'../Images/Menu/oSearchF.gif',
				iLeaf:'../Images/Menu/oSearchF.gif',
				value:'Unread Mail'
			}],
			value:'Search Folders'
		}],
		value:'Personal Folders'
	}]
}

var <strong>cfgJSON</strong> = {
	basePath : '../',
	singleExpand : false,
	hintBeforeDelete : false,
	lang : 'en',
	checkName : 'chkDemo',
	defMethod : 'alert("Node Index : " + {$NODE}.index)',
	expandLevel : 2,
	autoCheck : true,
	tempData : <strong>dataJSON</strong>
}
</pre></div>
<script language="javascript" type="text/javascript">
var objTree = new SkyTree('objTree','Demo'); //Declare and create a skytree object.
objTree.initialize(cfgJSON); // initialize the object with configuration
</script>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -