下の参考URLにあるツリービューを試してみました。
ポイントは、
・リスト(ul/li)を使って、ツリーを作成する
・要素クリックイベントを定義して、子要素表示非表示を制御する
選択した子要素はクラスを定義し直して、CSSで定義した装飾を行う
・クリックイベントは、javaScriptを使って、clickイベントを定義する
javaScript内では、jQueryを仕様する($(document)などの$の使い方は、jQueryを勉強して覚える）
・要素の装飾はCSSファイルで定義する
１、HTML
1) <head>にjqueryと、作成するJavaScriptファイルを定義する
2) <head>に使用するcssファイルを定義する
3) <body> にツリービューのリストを記載する
TreeContainerが親要素、tree以下が子要素（ツリー）となります。
ツリーはリスト(ul,li)で作成します。
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="treeview.js"></script>
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<div class="TreeContainer" >
<div class="ParentPlace">
<span>藤沢小学校</span>
</div>
<br><br>
<ul class="tree">
<li>
<span>1</span>
<img src="Images/ChildNode.png" />
<a> １年 </a>
<ul>
<li>
<span>3</span>
<img src="Images/ChildNode.png" />
<a>A組</a>
<ul>
<li><a>鈴木先生</a></li>
<li>
<span>3</span>
<img src="Images/ChildNode.png" />
<a>Hydarbad</a>
<ul>
<li><a>生徒：青木</a></li>
<li><a>生徒：浅野</a></li>
<li><a>生徒：高橋</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>3</span>
<img src="Images/ChildNode.png" />
<a>２年</a>
<ul>
<li><a>A組</a></li>
<li><a>B組</a></li>
<li>
<span>3</span>
<img src="Images/ChildNode.png" />
<a>佐藤先生</a>
<ul>
<li><a>江口</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
下図がブラウザに表示された絵となります。
２、JavaScriptコード
treeview.jsにJavaScriptのコードを記載する
(1) LoadChildrenで、子要素表示非表示を制御します
(2) NodeSelectionで、クラスの定義し直しします(removeClass/addClass)
(3) $(document).readyで、で「HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行」します。
コードは、画像クリックしたら、 LoadChildrenを実行し、treeのliをクリックしたらremoveClassで、 CSSクラスを削除し、addClassで"selected"クラスを定義し直します
※クラスを定義し直して、CSSで定義したスタイルを使って装飾しなおします。
function LoadChildren(ctrl) {
if ($(ctrl).next('a').next('ul').is(':visible')) {
$(ctrl).next('a').next('ul').hide('slow');
$(ctrl).attr('src', '/Images/ChildNode.png');
}
else {
$(ctrl).next('a').next('ul').show('slow');
$(ctrl).attr('src', 'Images/ChildNode.png');
}
}
function NodeSelection(ctrl) {
$('ul.tree li').find('a').each(function () { $(this).removeClass(); })
$(ctrl).addClass("selected");
}
$(document).ready(function () {
$('ul.tree li').each(function () {
$(this).children('img').click(function () {
LoadChildren(this);
});
});
$('ul.tree li a').click(function (e) {
$('ul.tree li').find('a').each(function () { $(this).removeClass(); })
$(this).addClass("selected");
});
});
３、CSS定義
Style.cssを作成します。
ファイル内では、クラス(TreeContainerなど)の装飾定義をします。
要素を選択した時の”selected”要素も定義します。
.TreeContainer {
border: solid 0px red;
width: 350px;
height: 400px;
overflow-y: auto;
padding: 10px;
}
.TreeContainer .ParentPlace {
border: solid 0px silver;
padding: 5px;
font-size: 10pt;
font-family: 'Segoe UI';
width:auto;
}
TreeContainer .ParentPlace span {
float:left;
border:dashed 2px silver;
padding:5px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
.TreeContainer .MyPlace {
border: solid 0px silver;
padding: 5px;
font-size: 10pt;
font-family: 'Segoe UI';
width:auto;
}
.TreeContainer .MyPlace span {
float:left;
border:dashed 2px silver;
padding:5px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
TreeContainer ul.tree,
ul.tree ul {
list-style-type: none;
background: url(Images/vline.png) repeat-y;
margin: 0;
padding: 0;
cursor: pointer;
border: solid 0px black;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-left:5px;
margin-top:0px;
}
TreeContainer ul.tree ul {
margin-left: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.TreeContainer ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(Images/node.png) no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.TreeContainer ul.tree li span {
background-color: green;
padding: 2px 6px;
border-radius: 10px;
color: white;
}
TreeContainer ul.tree li a {
/*background-color: green;
padding: 2px 6px;
border-radius: 10px;
color: white;*/
}
.selected {
background-color: green;
padding: 2px 6px;
border-radius: 10px;
color: white;
}
selected:hover {
color:yellow;
}
.TreeContainer ul.tree li.last {
background: url(Images/lastnode.png) no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.TreeContainer ul.tree li:last-child {
background: #fff url(Images/lastnode.png) no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.TreeContainer ul.tree div:hover {
text-decoration: underline;
}
※Images/ChildNode.pngは、参考URLにあるファイル一式ダウンロードすると入っています。
【参考URL】
http://www.codeproject.com/Tips/1073289/Treeview-in-HTML-using-CSS-and-JQuery
0 件のコメント:
コメントを投稿