JavaScript + Ajax 実践サンプル集 - jQueryのTreeViewプラグインを利用したツリー型のメニュー

jQueryのTreeViewプラグインを利用したツリー型のメニュー　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのTreeView()プラグインを利用してツリー型メニューを表示します。[+]をクリックするとノードが展開します。[-]をクリックするとノードを折りたたみます。ノードをクリックするとページを移動します。「Site Map」を展開して「JavaScript + Ajax」のノードをクリックすると当サイトが表示されます。

このサンプルを編集して試してみる

    $(function() {   
      $("#tree").treeview({   
        collapsed: true,   
        animated: "medium",   
        control: "#sidetreecontrol",   
        persist: "location"  
      });   
    })  

<ul id="tree">
  <li><a href="?#"><strong>Home</strong></a>
    <ul>
      <li><a href="#">Home 1 </a></li>
      <li><a href="#">Home 2</a></li>
      <li><a href="#">Home 3</a></li>
    </ul>
  </li>
 ・・・
  <li><a href="?#">Site Map</a>
    <ul>
      <li><a href="http://jsajax.com" target="_blank">JavaScript + Ajax </a></li>
      <li><a href="http://www.google.co.jp" target="_blank">Google</a></li>
      <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li>
      <li><a href="http://www.msn.co.jp" target="_blank">MSN</a></li>
    </ul>
  </li>
</ul>

<!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>
  <title>jQuery - Treeview plugin</title>  
  <link href="jQuery/TreeView/jquery.treeview.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/TreeView/screen.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/jquery.cookie.js" type="text/javascript"></script>
  <script src="jQuery/TreeView/jquery.treeview.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("#tree").treeview({
        collapsed: true,
        animated: "medium",
        control: "#sidetreecontrol",
        persist: "location"
      });
    })		
	</script>

</head>
<body>
  <div id="sidetreecontrol">
    <a href="?#">Collapse All</a> | <a href="?#">Expand All</a>
  </div>
  <ul id="tree">
    <li><a href="?#"><strong>Home</strong></a>
      <ul>
        <li><a href="#">Home 1 </a></li>
        <li><a href="#">Home 2</a></li>
        <li><a href="#">Home 3</a></li>
      </ul>
    </li>
    <li><a href="?#">What's New</a>
      <ul>
        <li><a href="#">What's New 1</a></li>
        <li><a href="#">What's New 2</a></li>
        <li><a href="#">What's New 3</a></li>
      </ul>
    </li>
    <li><a href="?#">Product Info</a>
      <ul>
        <li><a href="#">Product Info 1</a></li>
        <li><a href="#">Product Info 2</a></li>
        <li><a href="#">Product Info 3</a></li>
      </ul>
    </li>
    <li><a href="?#">About Us</a>
      <ul>
        <li><a href="#">About Us 1</a></li>
        <li><a href="#">About Us 2</a></li>
        <li><a href="#">About Us 3</a></li>
      </ul>
    </li>
    <li><a href="?#">Site Map</a>
      <ul>
        <li><a href="http://jsajax.com" target="_blank">JavaScript + Ajax </a></li>
        <li><a href="http://www.google.co.jp" target="_blank">Google</a></li>
        <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li>
        <li><a href="http://www.msn.co.jp" target="_blank">MSN</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview ul {
	background-color: white;
	margin-top: 4px;
}

.treeview .hitarea {
	background: url(images/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 16px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}

.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
	background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 

.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  

.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 

.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 


.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/TreeView/jquery.treeview.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/TreeView/screen.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/jquery.cookie.js" type="text/javascript"></script>
  <script src="jQuery/TreeView/jquery.treeview.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("#tree").treeview({
        collapsed: true,
        animated: "medium",
        control: "#sidetreecontrol",
        persist: "location"
      });
    })		
	</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <div id="sidetreecontrol">
    <a href="?#">Collapse All</a> | <a href="?#">Expand All</a>
  </div>
  <ul id="tree">
    <li><a href="?#"><strong>Home</strong></a>
      <ul>
        <li><a href="#">Home 1 </a></li>
        <li><a href="#">Home 2</a></li>
        <li><a href="#">Home 3</a></li>
      </ul>
    </li>
    <li><a href="?#">What's New</a>
      <ul>
        <li><a href="#">What's New 1</a></li>
        <li><a href="#">What's New 2</a></li>
        <li><a href="#">What's New 3</a></li>
      </ul>
    </li>
    <li><a href="?#">Product Info</a>
      <ul>
        <li><a href="#">Product Info 1</a></li>
        <li><a href="#">Product Info 2</a></li>
        <li><a href="#">Product Info 3</a></li>
      </ul>
    </li>
    <li><a href="?#">About Us</a>
      <ul>
        <li><a href="#">About Us 1</a></li>
        <li><a href="#">About Us 2</a></li>
        <li><a href="#">About Us 3</a></li>
      </ul>
    </li>
    <li><a href="?#">Site Map</a>
      <ul>
        <li><a href="http://jsajax.com" target="_blank">JavaScript + Ajax </a></li>
        <li><a href="http://www.google.co.jp" target="_blank">Google</a></li>
        <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li>
        <li><a href="http://www.msn.co.jp" target="_blank">MSN</a></li>
      </ul>
    </li>
  </ul>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのTreeViewプラグインを利用したツリー型のメニュー　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのTreeViewプラグインを利用したツリー型のメニュー 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのTreeViewプラグインを利用したツリー型のメニュー　《プログラマーがネットで副収入を得る方法とは》