Just My Life & My Work

樹 (tree)

2011 年 07 月 20 日

這不是大自然中的樹，而是網頁中表示頁面階層的概念樹。jstree設計的算是相當完善，修改一下http://www.jstree.com/demo中的範例樹，即可達成想要的效果，只要再設計介面一下，這一棵樹就能使用嚕～

此樹可以增加folder、file，並更rename，想對它們作remove、cut、copy、paste也是沒問題，甚至可以search，找到關鍵節點後，樹會展開。在節點按右鍵可create、rename、delete、edit(cut、copy、paste)，拖曳節點可以將之放置其它節點之下或之中。此外，還可以使用鍵盤操作，目前可用鍵為up/down/left/right/space/f2/del。

此為陽春版的樹，未來還要稍加修改。

tree

由jstree修改而來的介面。

tree

由jQuery in Action範例修改而來的介面，點選QOO會跑出影像。

這裡節錄body標籤的程式碼：

<pre>  <body>
	<a href="PhotoFunia.jpg">QOO</a>
    <fieldset>
      <legend>HELLO - HappyMan's Tree!!</legend>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>
          Item 3
          <ul>
            <li>Item 3.1</li>
            <li>
              Item 3.2
              <ul>
                <li>Item 3.2.1</li>
                <li>
				  Item 3.2.2
				  <ul>
				    <li>Item 3.2.2.1</li>
				    <li>
					  Item 3.2.2.2
					  <ul>
					    <li>Item 3.2.2.2.1</li>
						<li><a href="PhotoFunia.jpg">QOO</a></li>
					  </ul>
					</li>
				  </ul>
				</li>
                <li>Item 3.2.3</li>
              </ul>
            </li>
            <li>Item 3.3</li>
          </ul>
        </li>
        <li>
          Item 4
          <ul>
            <li>Item 4.1</li>
            <li>
              Item 4.2
              <ul>
                <li>Item 4.2.1</li>
                <li>Item 4.2.2</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Item 5</li>
      </ul>
    </fieldset>
  </body></pre>

分類：

jQuery, 實習, 教學

發表留言

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲