Элемент дерева в боковой панели Firefox с динамическими элементами и функциональностью щелчка - PullRequest
Новая
       20

Элемент дерева в боковой панели Firefox с динамическими элементами и функциональностью щелчка

1 голос
/ 10 мая 2010

Я создал расширение для отображения боковой панели в 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) Как я могу реализовать функцию ссылки .. как в ссылке, которая открывается при нажатии на элемент treecell? Атрибут "onclick" не работает. Также и я могу запускать функции JavaScript по нажатию отдельных элементов.

2) Как мне отобразить динамический список. Предположим, у меня есть функция JS, которая возвращает список, как я могу показать его здесь как элементы дерева (в основном, тогда js должен запускаться каждый раз, когда я раскрываю родительский элемент дерева, чтобы увидеть детей)

1 Ответ

2 голосов
/ 14 мая 2010

Сначала разместите обработчик события 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.

Этот объект будет служить интерфейсом для виджета «Дерево» с данными, что позволит дереву автоматически обновляться при изменении данных.

Вы можете найти больше информации о пользовательских видах дерева здесь: https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views

...