Нужен компонент Оглавления статей

Список оглавлений

#1 10 апреля 2015 в 18:11
Доброго времени суток уважаемые форумчане .
Нужен компонент оглавления статей, перед каждой статьей список с оглавлением,
Сами пункты оглавления брать поочередно из статьи (сами пункты в тегах h2)
Как это долго выглядеть в готовом варианте
Примерно так
joxi.ru/Vrwl3qBFJavVmX
Сколько будет стоить реализовать такой компонент?
Просьба писать в ЛС Цену и Сроки+ если есть портфолио будет отлично.
#2 10 апреля 2015 в 19:37
ну во первых это не компонент а плагин будет который перед выводом статьи будет выводить оглавление и который по факту должен выдернуть h2 заголовок и поставить на него якорь чтобы можно было перейти на нужный раздел.
#3 10 апреля 2015 в 21:37
Макс прав. Или фильтр. С точки зрения удобства писателя статьи фильтр даже лучше. А идея интересная.
#4 10 апреля 2015 в 22:52
Дык можно и не заморачиваться, все просто решается несколькими строчками js в tpl шаблона.
#5 10 апреля 2015 в 23:01
да, но фильтр можно вставить в любое место статьи — хоть в начало, хоть после анонса, хоть в конец, а в tpl будет дубово стоять, где поставишь.
#6 11 апреля 2015 в 00:05
вставлять нужно будет только в начале статьи
#7 11 апреля 2015 в 01:45
Изменения вносим в com_content_read.tpl
Там, где нужно выводить оглавление, прописываем:
  1. <h3>Оглавление:</h3>
  2. <ul class="show-all-h2"></ul>
Внизу вставляем скрипт:
  1.  
  2. {literal}
  3. <script type="text/javascript">
  4. var h2link = (function(i){return "#anchoron" + (i + 1);});
  5. var h2title = (function(i){return "anchoron" + (i + 1);});
  6. $('.con_text h2').clone().addClass('h2-list').prependTo('ul.show-all-h2').wrap("<li class='show-li-h2'><a href=''></a></li>");
  7. $('h2.h2-list').contents().unwrap();
  8. $(".con_text h2").attr('id', h2title);
  9. $('li.show-li-h2 a').attr('href', h2link).click(function(){
  10. $('html, body').animate({
  11. scrollTop: $( $.attr(this, 'href') ).offset().top
  12. }, 500);
  13. return false;
  14. });
  15. </script>
  16. {/literal}
  17.  
Стилизируем на своё усмотрение, но базово хотя бы так (добавить в css):
  1.  
  2. ul.show-all-h2 {
  3. list-style-type: decimal;
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
Смотреть результат.
#8 11 апреля 2015 в 15:57
Ещё можно так. Второе решение сегодня постараюсь выложить в блог.
#9 12 апреля 2015 в 15:00
Джехутимери, браво-браво дружище. Отличный хак, красивый код.
#10 12 апреля 2015 в 18:37
Спасибо, Странник, приятно :)
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.