antigo.htm
5.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
<title>jsUI-Treeview Sample</title>
<script language="javascript" src="../jsUI-Global/common.js"></script>
<script language="javascript" src="../jsUI-Global/uiCommon.js"></script>
<script language="javascript" src="../jsUI-Treeview/component.js"></script>
<script>
var mytreeview = new Object();
function addTreeview()
{
mytreeview = treeviewNew("mytreeview", "default", document.getElementById("treeviewCell"), null);
mytreeview.itemClick = doClick;
mytreeview.itemExpand = doExpand;
mytreeview.createItem("itmComputer", "Computer", "../images/computer-s.gif", true, true, true, null)
mytreeview.createItem("itmCDrive", "c:\\", "../images/drive-s.gif", null, true, true, "itmComputer")
mytreeview.createItem("folder1", "Folder 1", "../images/folder-s.gif", null, true, true, "itmCDrive")
mytreeview.createItem("file3", "File 3", "../images/addressbook-s.gif", false, true, true, "itmCDrive")
mytreeview.createItem("folder2", "Folder 2", "../images/folder-s.gif", null, true, true, "itmCDrive")
mytreeview.createItem("file4a", "File 4a", "../images/addressbook-s.gif", false, true, false, "folder2")
mytreeview.createItem("file4b", "File 4b", "../images/addressbook-s.gif", false, true, false, "folder2")
//Activate other examples
document.getElementById("btnAddTreeview").disabled = true;
document.getElementById("btnAddItem").disabled = false;
document.getElementById("btnAddCustomItem").disabled = false;
}
function doClick(itemID)
{
document.getElementById("txtItemValue").value = itemID;
document.getElementById("txtExpandValue").value = "";
}
function doExpand(itemID)
{
document.getElementById("txtItemValue").value = "";
document.getElementById("txtExpandValue").value = itemID;
if (itemID == "folder1")
{
mytreeview.createItem(itemID + "a", "File a", "../images/addressbook-s.gif", false, false, true, itemID)
mytreeview.createItem(itemID + "b", "File b", "../images/addressbook-s.gif", false, false, true, itemID)
}
}
var lastItemNum = 1;
function addItem()
{
mytreeview.createItem("itmUser" + lastItemNum, "User Item " + lastItemNum, "../images/drive-s.gif", null, true, true, "itmComputer")
lastItemNum++;
}
function addCustomItem()
{
var useParent = document.getElementById("lstParent").options[document.getElementById("lstParent").selectedIndex].value;
var text = document.getElementById("txtCustomValue").value;
var image = document.getElementById("lstItemImage").options[document.getElementById("lstItemImage").selectedIndex].value;
if (useParent != "none" && image != "none")
{
mytreeview.createItem("itmUser" + lastItemNum, text, image, false, true, true, useParent)
lastItemNum++;
}
}
</script>
<link rel='stylesheet' type='text/css' href='../documentation.css'></link>
</head>
<body vlink="#0000ff" link="#0000ff" alink="#0000ff">
<table width="100%"><tr><td valign="bottom">
<h3>Treeview Sample</h3>
</td><td align="right" valign="middle"><a href="documentation.xml">Reference</a></td></tr></table>
<div class="sample">This sample demonstrates how to create and modify a Treeview.
<br />
</div>
<table border="0" width="100%" height="65%" cellpadding="0" cellspacing="0">
<tr>
<td style="width:195px;" height="100%" id="treeviewCell" valign="top">
</td>
<td valign="top">
<input type="button" value="Create Treeview" onclick="addTreeview()" id="btnAddTreeview"/>
<div class="description">
Instantiate the Treeview into an empty, global object, and add it to the DOM, using the <i>treeviewNew</i> method.
</div>
Item ID: <input type="text" value="" id="txtItemValue" disabled="true"/>
<div class="description">
Handle the <i>itemClick</i> event to get information about items when they are clicked
</div>
Item ID: <input type="text" value="" id="txtExpandValue" disabled="true"/>
<div class="description">
Handle the <i>itemExpand</i> event to get information about items when they are expanded, in order to programmatically add children.
</div>
<input type="button" value="Add Item" id="btnAddItem" disabled="true" onclick="addItem()"/>
<div class="description">
Use the <i>createItem</i> method to add an item to the Treeview
</div>
Specify button text, choose an image and a parent item...<br />
<input type="text" id="txtCustomValue" value="Item Text"/>
<select id="lstItemImage">
<option value="none">Choose an Image</option>
<option value="../images/computer-s.gif">Computer</option>
<option value="../images/folder-s.gif">Folder</option>
<option value="../images/addressbook-s.gif">Address Book</option>
<option value="../images/drive-s.gif">Drive</option>
</select>
<select id="lstParent">
<option value="none">Choose a Parent</option>
<option value="itmComputer">Computer</option>
<option value="itmCDrive">c:\</option>
<option value="folder1">Folder 1</option>
</select><br />
<input type="button" value="Add Item" id="btnAddCustomItem" disabled="true" onclick="addCustomItem()"/>
<div class="description">
Use the <i>createTask</i> method to add a task to a specific parent in the Treeview
</div>
<br />
</td></tr></table>
<br />
<div class="footer">To view the source code, right-click this page and choose View Source from the shortcut menu that appears.</div>
<br />
© 2005 Jonathan Wise. Some rights reserved.
</body>
</html>