jsTree Bootstrap Theme / Улучшение / Плагины Bootstrap

Версия: v3.3.4

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS

Язык: Английский

Вес файла: 2.24 Mb

Уникальный ID: 5417

Посмотрели: 703 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 15 раз

Прокомментировали: 0 раз

Рейтинг: 4.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/orangehill/jstree-bootstrap-theme

Информация: Пользователям

Информация: Правообладателям

Теги: Plugin, jstree, меню, древовидное меню, Bootstrap

Поделился: BootstrapТема

Добавлено: 2022-07-21 в 18:07

Метка: 1658416271

⇄ ⇅

<div class="col-md-4">
 <div id="jstree" style="margin-top:20px;" class="proton-demo">
 <ul>
 <li>Root node (basic)
 <ul>
 <li data-jstree='{ "selected" : true }'>
 <a href="#">
 <em>initially</em>
 <strong>selected</strong>
 </a>
 </li>
 <li data-jstree='{ "icon" : "https://bootstraptema.ru/plugins/2022/jstree/tree_icon.png" }'>custom icon URL</li>
 <li data-jstree='{ "opened" : true }'>initially open
 <ul>
 <li>Another node</li>
 </ul>
 </li>
 <li data-jstree='{ "icon" : "fa fa-pagelines" }'>Custom icon class (font-awesome)</li>
 </ul>
 </li>
 <li><a href="#">Root node 2</a>
 </li>
 </ul>
 </div>
 </div>

<div class="col-md-8" style="margin-top:20px;">
 <pre style="height:180px;"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" /&gt;
&lt;link rel="stylesheet" href="https://bootstraptema.ru/plugins/2022/jstree/style.css" /&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://bootstraptema.ru/plugins/2022/jstree/jstree.js"&gt;&lt;/script&gt;

&lt;div class="col-md-4"&gt;
 &lt;div id="jstree-proton-1" style="margin-top:20px;" class="proton-demo"&gt;
 &lt;ul&gt;
 &lt;li&gt;Root node (basic)
 &lt;ul&gt;
 &lt;li data-jstree='{ "selected" : true }'&gt;
 &lt;a href="#"&gt;
 &lt;em&gt;initially&lt;/em&gt;
 &lt;strong&gt;selected&lt;/strong&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li data-jstree='{ "icon" : "https://bootstraptema.ru/plugins/2022/jstree/tree_icon.png" }'&gt;custom icon URL&lt;/li&gt;
 &lt;li data-jstree='{ "opened" : true }'&gt;initially open
 &lt;ul&gt;
 &lt;li&gt;Another node&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li data-jstree='{ "icon" : "fa fa-pagelines" }'&gt;Custom icon class (font-awesome)&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Root node 2&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;script&gt;
 $(function() {
 $('#jstree-proton-1').jstree({
 'core': {
 'themes': {
 'name': 'proton',
 'responsive': true
 }
 }
 });
 });
 &lt;/script&gt;
 </code></pre>
 </div>
 </div>

</div>

BootstrapTema

jsTree Bootstrap Theme

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0