Наш ассоциированный член www.Bikinika.com.ua

jsTree

  1. Що таке jsTree?
  2. Початок роботи - все на перший погляд
  3. Додайте тему jsTree
  4. Налаштування контейнера
  5. Включити jQuery
  6. Включити jsTree
  7. Створіть екземпляр
  8. Слухайте події
  9. Взаємодійте зі своїми примірниками

Що таке jsTree?

jsTree - плагін jquery , який забезпечує інтерактивні дерева . Це абсолютно безкоштовно , відкрите джерело і розповсюджується під Ліцензія MIT . jsTree легко розширюється, темується та налаштовується, він підтримує джерела даних HTML та JSON та завантаження AJAX .

Функція jsTree належним чином функціонує в будь-якій моделі коробки (коробці вмісту або рамці), може завантажуватися як модуль AMD і має вбудовану мобільну тему для чуйного дизайну, яку можна легко налаштувати. Він використовує систему подій jQuery, тому зв'язування зворотних дзвінків на різні події в дереві знайоме і просте.

Лише кілька особливостей, які варто відзначити:

  • підтримка перетягування та перетягування
  • навігація по клавіатурі
  • inline редагувати, створювати та видаляти
  • тридержавні прапорці
  • нечіткий пошук
  • налаштовані типи вузлів


Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8 +
старіші версії можуть працювати, але не перевіряються
Завантажити Обговоріть Повідомте про помилки Пожертвуйте

Початок роботи - все на перший погляд

  1. Завантажте jsTree або використовувати CDNJS

    Якщо ви вирішили завантажити - усі необхідні файли знаходяться в dist / folder завантаження

  2. Додайте тему jsTree

    Теми теж можна завантажувати, але найкраще для продуктивності включати файл CSS.

    Якщо ви хостите файли самостійно:

    <link rel = "stylesheet" href = " dist / themes / default / style.min.css " />

    Якщо використовується CDNJS:

    <link rel = "stylesheet" href = " https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css " />

  3. Налаштування контейнера

    Це елемент, де ви хочете, щоб дерево з’явилося, достатньо <div>. У цьому прикладі є вкладене <ul>, оскільки іншого джерела даних не налаштовано (наприклад, JSON).

    <div id = "jstree_demo_div" > </div>

  4. Включити jQuery

    jsTree на вашій веб-сторінці вимагає 1.9.0 або більше . Ви можете використовувати версію CDN або включити локальну копію.

    <script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js "> </script>

  5. Включити jsTree

    Якщо ви розміщуєте файли самостійно: для виробництва включайте мінімізовану версію: dist / jstree.min.js, також існує версія для розробки: dist / jstree.js

    <script src = " dist / jstree.min.js "> </script>

    Якщо використовується CDNJS:

    <script src = " https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js "> </script>

  6. Створіть екземпляр

    Як тільки DOM буде готовий, ви можете приступити до створення екземплярів jstree.

    $ (function () { $ ('# jstree_demo_div'). jstree (); });

  7. Слухайте події

    jsTree використовує події, щоб повідомити вас про те, що щось змінюється, коли користувачі (або ви) взаємодіють з деревом. Тож прив'язка до jstree подій так само просто прив’язання до клацання. Є перелік подій та яку інформацію вони надають у документації API.

    $ ('# jstree_demo_div'). on ("змінено.jstree", функція (e, дані) {console.log (data.selected);});

  8. Взаємодійте зі своїми примірниками

    Як тільки екземпляр буде готовий, ви можете викликати його методи. Є перелік доступних методів в документації API. Три наведені нижче приклади роблять точно те саме

    $ ('button'). on ('click', function () { $ ('# jstree'). jstree (true) .select_node ('child_node_1'); $ ('# jstree'). jstree ('select_node') , 'child_node_1'); $ .jstree.reference ('# jstree'). select_node ('child_node_1'); });

показати повний код

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Тест jsTree </title> <link rel = "stylesheet" href = " dist / themes / default / style.min. css "/> </head> <body> <div id =" jstree "> <ul> <li> Корінний вузол 1 <ul> <li id ​​=" child_node_1 "> Дочірній вузол 1 </li> <li> Child вузол 2 </li> </ul> </li> <li> Корінний вузол 2 </li> </ul> </div> <button> демонстраційна кнопка </button> <script src = " dist / libs / jquery.js "> </script> <скрипт src =" dist / jstree.min.js "> </script> <script> $ (function () { $ ('# jstree'). jstree (); $ ( '#jstree'). on ("змінено.jstree", функція (e, дані) {console.log (data.selected);}); $ ('button'). on ('click', function () { $ ('# jstree'). jstree (true) .select_node ('child_node_1'); $ ('# jstree'). jstree ('select_node', 'child_node_1'); $ .jstree.reference ('# jstree') .select_node ('child_node_1'); });}); </script> </body> </html>

натисніть тут для старого сайту (v.1)

Що таке jsTree?

Новости