Как заставить плагин PowerTools работать на MooTools?

В частности, я пытаюсь использовать Tree функциональность, как можно увидеть здесь: http://cpojer.net/MooTools/tree/Demos/ Источник можно увидеть здесь: https://github.com/cpojer/mootools-tree/blob/master/README.md

Это мой HTML:

<ul class="tree" id="tree">
  <div id="admin">Admin Controls</div>
    <li class="selected"><a href="#">Test</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Test 2</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Top Links</a>
        <ul>
            <li id="article"><a href="/1">Link 1</a></li>
            <li id="article"><a href="/3">Link 2</a></li>
            <li id="article"><a href="/2">Link 3</a></li>
            <li id="article"><a href="/4">Link 4</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Lame Links</a>
        <ul>
            <li id="article"><a href="/9">Link 9</a></li>
            <li id="article"><a href="/10">Link 10</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Awesome Links</a>
        <ul>
            <li id="article"><a href="/11">Link 11</a></li>
            <li id="article"><a href="/12">Link 12</a></li>
        </ul>
    </li>
</ul>

Я добавил Tree.js к моему mootools.js основной файл.

Это мой звонок в JS:

window.addEvent('domready', function(){
       var tree = new Tree('#tree');
        tree.serialize();
});

Так как сортировка дерева не работает.

Мысли?

2 ответа

В данном случае вы передаете селектор "#tree. Если класс дерева ожидает идентификатор, вы не используете знак фунта, а просто" дерево ". В MooTools есть $ fn для поиска идентификатора и $$ Для полного поиска по селектору есть разные причины, по которым они решили разделить их.

Нашел этот вопрос и подумал об ответе.
Хотя и немного поздно, но я не был членом SO, когда вы задавали этот вопрос:)

Что я изменил, чтобы поставить это работает:

  • Вам нужно просто пройти treeID без #,
  • Ваше дерево должно иметь только <ul> а также <li> элементы, иначе tree.js не сможет перетаскивать их поверх обычных элементов div.
  • Вам нужны уникальные идентификаторы, я переименовал всех вас id="admin" в class="admin" вместо.

Таким образом, вы можете использовать javascript / mootools, например:

window.addEvent('domready', function(){
       var tree = new Tree('tree');
        tree.serialize();
});

Демо здесь

Другие вопросы по тегам