jQueryのTreeViewプラグインを利用したツリー型のメニュー (Folder)

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

このサンプルは、jQueryのtreeView()プラグインを利用してフォルダーツリーを表示します。フォルダのノードを展開するとファイルのノードが展開されます。フォルダを開くとフォルダのイメージが変わります。[Add!]ボタンをクリックすると新規フォルダとアイテムを追加します。

このサンプルは、jQueryのtreeView()プラグインを利用してフォルダーツリーを表示します。フォルダのノードを展開するとファイルのノードが展開されます。フォルダを開くとフォルダのイメージが変わります。[Add!]ボタンをクリックすると新規フォルダとアイテムを追加します。

このサンプルで使用しているイメージは、 ここ からダウンロードしてください。 

$(function() {
  $("#browser").treeview();
  $("#add").click(function() {
    var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
                      "<li><span class='file'>Item1</span></li>" +
                      "<li><span class='file'>Item2</span></li>" +
                      "</ul></li>").appendTo("#browser");
    $("#browser").treeview({
      add: branches
    });
  });
});