Текущее время: 24 фев 2017, 12:09


 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Правила форума


Различные ББкоды, которые вы можете использовать на своем форуме.
Если вы нашли интересный ББкод, можете поделиться им со всеми, но пожалуйста помните: один ББкод - одна тема.



Начать новую тему Ответить на тему  [ Сообщений: 2 ] 
Автор Сообщение
 Заголовок сообщения: BBCode дерево
СообщениеДобавлено: 24 май 2014, 19:13 
Забыл про аватар :)
Новичок

Зарегистрирован: 10 апр 2014, 09:26
Сообщений: 23
Откуда: Киев
Очков репутации: 2

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
Есть такая необходимость в организации дерева в некоторых основных темах с гиперссылками и всего прочего. Решил сделать BBCode на основе jstree, который будет съедать контент в формате JSON. Так как я новичек ткните пожалуйста носом в готовый (может плохо искал) или с какими ньюансами могу встриться.
Спасибо.


Не в сети
 Профиль WWW Cпасибо сказано  
 
 Заголовок сообщения: Re: BBCode дерево
СообщениеДобавлено: 30 май 2014, 15:13 
Забыл про аватар :)
Новичок

Зарегистрирован: 10 апр 2014, 09:26
Сообщений: 23
Откуда: Киев
Очков репутации: 2

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
Закончил я с деревом. от jstree отказался в пользу вот такого подхода. Автору респект.
Тем не менее пришлось поработать над темой.
Вот что получилось.
Как реализовал:
BBcode
Код:
[tree={TEXT1}]{TEXT2}[/tree]

Текст:
Код:
<script type="text/javascript">
function tree_toggle(event) {
        event = event || window.event
        var clickedElem = event.target || event.srcElement
        if (!hasClass(clickedElem, 'Expand')) {
                return // клик не там
        }
        // Node, на который кликнули
        var node = clickedElem.parentNode
        if (hasClass(node, 'ExpandLeaf')) {
                return // клик на листе
        }
        // определить новый класс для узла
        var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
        // заменить текущий класс на newClass
        // регексп находит отдельно стоящий open|close и меняет на newClass
        var re =  /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/;
        var str='\u0024' + '1'+newClass+'\u0024'+'3';
         node.className = node.className.replace(re, str);
}
function hasClass(elem, className) {
  var exp=new RegExp('(^|' +'\u005c' + 's)'+className+'(' + '\u005c' + 's|$)');       
  return exp.test(elem.className);
}
</script>
<style type="text/css">
.Container {padding: 0;margin: 0;}
.Container li {list-style-type: none;}
/* indent for all tree children excepts root */
.Node {background-image : url(/images/ranks3/iasu_ukrbb_net/tree_i.gif);background-position : top left;background-repeat : repeat-y;margin-left: 18px;zoom: 1;}
.IsRoot {margin-left: 0;}
/* left vertical line (grid) for all nodes */
.IsLast {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_i_half.gif);background-repeat : no-repeat;}
.ExpandOpen .Expand {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_expand_minus.gif);}
/* closed is higher priority than open */
.ExpandClosed .Expand {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_expand_plus.gif);}
/* highest priority */
.ExpandLeaf .Expand {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_expand_leaf.gif);}
.Content {min-height: 18px;margin-left:18px;}
* html .Content {height: 18px;}
.Expand {width: 18px;height: 18px;float: left;}
.ExpandOpen .Container {display: block;}
.ExpandClosed .Container {display: none;}
.ExpandOpen .Expand, .ExpandClosed .Expand {cursor: pointer;}
.ExpandLeaf .Expand {cursor: auto;}
</style>
<div onclick="tree_toggle(arguments[0])">
<div>{TEXT1}</div>
<ul class="Container" id="Tree{TEXT1}">
</ul>
</div>
<script type="text/javascript">
//<(> - NodeStart начало ветви, псоле которого идет название
//<+> - NodeEnter начинается содержимое ветви
//<)> - NodeEnd конец ветви
//<*> - LiveStart начало листа
//</> - LiveEnd конец листа
//<.*> - LastLiveStart начало последнего листа
//<.(> - LastNodeStart начало последней ветви
var text1= "{TEXT2}";
var NodeStart='<li class="Node ExpandClosed"><div class="Expand"></div><div class="Content">';
var LastNodeStart='<li class="Node IsLast ExpandClosed "><div class="Expand"></div><div class="Content">';
var NodeEnter = '</div><ul class="Container">';
var NodeEnd = '</ul></li>';
var LiveStart='<li class="Node ExpandLeaf"><div class="Expand"></div><div class="Content">';
var LastLiveStart='<li class="Node IsLast ExpandLeaf"><div class="Expand"></div><div class="Content">';
var LiveEnd = '</div></li>';
var text2=text1.replace(/<br \/>/g,'');//убираем переводы
text2=text2.replace (/&lt;&#40;&gt;/g,NodeStart); //<(>
text2=text2.replace (/&lt;.&#40;&gt;/g,LastNodeStart); //<.(>
text2=text2.replace (/&lt;\+&gt;/g,NodeEnter);//<+>
text2=text2.replace (/&lt;&#41;&gt;/g,NodeEnd);//<)>
text2=text2.replace (/&lt;\*&gt;/g,LiveStart);//<*>
text2=text2.replace (/&lt;.\*&gt;/g,LastLiveStart);//<*>
text2=text2.replace (/&lt;\/&gt;/g,LiveEnd);//</>
//дальше в середине чистый HTML, меняем обратно на < и >
text2=text2.replace (/&lt;/g,'<');
text2=text2.replace (/&gt;/g,'>');
document.getElementById('Tree{TEXT1}').innerHTML=text2;
</script>

Тут нужно скачать картинки и записать их в картинки с теми же названиями и поменять на свои url-ки в стилях.

Правила формирования структуры:

<(> - NodeStart начало ветви, псоле которого идет название
<+> - NodeEnter начинается содержимое ветви
<)> - NodeEnd конец ветви
<*> - LiveStart начало листа
</> - LiveEnd конец листа
<.*> - LastLiveStart начало последнего листа
<.(> - LastNodeStart начало последней ветви
все внутреннее содержание папок и листов формируется HTML-разметкой.
Фрагмент приведенного примера
Код:
<(>ВНТУ (Вінницький національний технічний університет), <a href=http://vntu.edu.ua> сторінка </a> <+>
<(>IнАЕКСУ (Інститут автоматики, електроніки та комп'ютерних систем управління), <a href=http://inaeksu.vntu.edu.ua/> сторінка </a><+>
<*>МПА (кафедра Метрології та промислової автоматики) <a href=http://mpa.vntu.edu.ua/> сторінка </a> </>
<*>КСУ(Кафедра комп’ютерних систем управління ) <a href=http://www.ksu.vntu.edu.ua> сторінка </a> </>
<.*>АІВТ(Кафедра автоматики та інформаційно-вимірювальної техніки) <a href=http://aivt.inaeksu.vntu.edu.ua/> сторінка </a> </><)>
<(>ІнЕЕЕМ (Інститут електроенергетики та електромеханіки ), <a href=http://ineeem.vntu.edu.ua/> сторінка </a> <+>
<.*>ЕМКА (КАФЕДРА ЕЛЕКТРОМЕХАНІЧНИХ СИСТЕМ АВТОМАТИЗАЦІЇ В ПРОМИСЛОВОСТІ І НА ТРАНСПОРТІ) <a href=http://emca.ineeem.vntu.edu.ua> сторінка </a> </><)>
<.(>IнІТКІ (Інститут інформаційних технологій та комп'ютерної інженерії), <a href=http://initki.vntu.edu.ua/> сторінка </a> <+>
<.*>КПЗ (кафедра Програмного забезпечення) <a href=http://pmos.webro.com.ua/> сторінка </a>  </><)>
<)>


Не в сети
 Профиль WWW Cпасибо сказано  
 
За это сообщение пользователю san "Спасибо" сказали:
Bukovka, Gold, Merlin
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 2 ] 

 

Часовой пояс: UTC + 3 часа [ Летнее время ]



 Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  

 
cron