Firefox 侧边栏中的树元素，具有动态元素和单击功能

发布于 2024-09-01 02:43:51 字数 934 浏览 4 评论 0原文

我创建了一个扩展来在 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 不显示任何内容

1）我如何实现链接功能......如单击树单元元素时打开的链接？ “onclick”属性不起作用。另外，我可以在单击各个项目时运行 javascript 函数吗？

2）如何显示动态列表。假设我有一个返回列表的 JS 函数，我如何在此处将其显示为树元素（基本上，每次我展开树父级以查看子级时，js 都应该运行）

原文

I have created an extension to show a sidebar in firefox.
Now i need to display a tree like structure where the third level will be dynamic and loads a particular link on clicking.
I know how to create the three level hierarchy but with static data.. heres the code

  <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>

The onclick does not showup anything

1)How can i implement the link functionality.. as in a link to be opened on clicking a treecell element? The "onclick" attribute doesnot work. Also and can i run javascript functions on clicking of the individual items.

2) How can i have a dynamic list displayed. suppose i have a JS function that reurns a list, how can i show it here as tree elements (basically then the js should run everytime i expand the tree parent to see the children)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖彼岸 2024-09-08 02:43:51

首先，将 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

First, place the onclick event handler on the tree itself, not on the elements. When the user clicks on a cell, because of the event bubbling, the tree will catch it, no matter which cell receives the click:

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

Second, to create the content dynamically, you create an empty tree in XUL:

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

Then in JavaScript, you create an object that implements the nsITreeView interface (see link below), and assign it as the view of the tree you created in XUL.

This object will serve as a interface for the Tree widget to the data will allow the tree to update itself automatically if the data changes.

You can find more information about custom tree views here: https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views

回复收藏 0 原文

~没有更多了~