TreeControl (Closure Library API Documentation - JavaScript)
TreeControler とはエクスプローラなどでおなじみのこんなやつ。
デモコードがあるので、それを参考に簡単なサンプル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">
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.ui.tree.TreeControl');
</script>
<link rel="stylesheet" href="/css/demo.css">
<link rel="stylesheet" href="/css/tree.css">
<script>
var testData = ['ROOT',
[['folderA',
[['A1', [['fileA1-1'], ['fileA1-2']]],
['A2', [['fileA2-1'], ['fileA2-2']]]]],
['folderB',
[['B1', [['fileB1-1'], ['fileB1-2']]],
['B2', [['fileB2-1'], ['fileB2-2']]]]]]];
</script>
</head>
<body>
<h1>Closure Libraray: tree control sample</h1>
<hr/>
<div id="treeContainer" style="width:400px"></div>
<script>
function makeTree() {
var treeConfig = goog.ui.tree.TreeControl.defaultConfig;
treeConfig['cleardotPath'] = "/images/tree/cleardot.gif";
var tree = new goog.ui.tree.TreeControl('root', treeConfig);
createTreeFromTestData(tree, testData);
tree.render(goog.dom.$('treeContainer'));
}
function createTreeFromTestData(node, data) {
node.setHtml(data[0]);
if (data.length > 1) {
var children = data[1];
var childNotCollapsible = 3; // Hard coded to reduce randomness.
for (var i = 0; i < children.length; i++) {
var child = children[i];
var childNode = node.getTree().createNode('');
node.add(childNode);
createTreeFromTestData(childNode, child);
if (i == childNotCollapsible && child.length > 1) {
childNode.setIsUserCollapsible(false);
childNode.setExpanded(true);
nonCollapseNode = childNode;
}
}
}
}
makeTree();
</script>
</body>
</html>
closure-library付属の tree関係の画像(images/tree/*)と CSS(css/tree.css) を適切な場所に置いておくのがポイント。実行するとこんな感じ。
0 件のコメント:
コメントを投稿