2010-05-10 60 views
1

我已經創建了一個擴展來顯示在Firefox的側邊欄。 現在我需要顯示一個樹狀結構,其中第三層將是動態的,並在點擊時加載特定的鏈接。 我知道如何創建三個層次結構但靜態數據..繼承人的代碼 firefox側欄中的樹元素與動態元素和點擊功能

<treechildren> 
    <treeitem container="true" open="true"> 
     <treerow> 
     <treecell label="Guys"/> 
    </treerow> 

    <treechildren> 
     <treeitem> 
     <treerow> 
      <treecell id="cell-of-treeitem1" label="Bob" onclick="alert('bob')"/> 
     </treerow> 
     </treeitem> 
     <treeitem> 
     <treerow> 
      <treecell label="Jerry"/> 

     </treerow> 
     </treeitem> 
    </treechildren> 
    </treeitem> 
</treechildren> 

的onclick不showup什麼

1)我怎樣才能實現鏈接功能..就像在點擊treecell元素時打開的鏈接一樣? 「onclick」屬性不起作用。此外,我可以在點擊各個項目時運行JavaScript功能。

2)如何顯示動態列表。假設我有一個JS函數來重新發送一個列表,我如何在這裏顯示它作爲樹元素(基本上,然後js應該每次運行我都會展開樹父項來查看孩子)

回答

2

首先,將onclick事件處理程序置於樹本身,而不是元素。當在小區內的用戶點擊,因爲該事件,冒泡,樹會抓住它,無論哪個小區接收到點擊:

function clickedOnSomething(event) { 
    if(event.originalTarget.localName == "treechildren") { 
     //do something here based on who is event.originalTarget 
    } 
} 

其次,要動態地創建內容,創建在XUL空樹:

<tree id="myTree" onclick="clickedOnSomething(event)" flex="1" seltype="single"> 
    <treecols> 
     <treecol id="myCol" label="Stuff" primary="true" flex="1" /> 
    </treecols> 
    <treechildren/> 
</tree> 

然後在JavaScript中,您創建一個實現nsITreeView接口的對象(見下面的鏈接),並將其指定爲您在XUL創建的樹視圖。

該對象將作爲Tree小部件的數據接口,允許樹在數據更改時自動更新。

您可以在這裏找到更多關於自定義樹形視圖的信息:https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views