Показать меню раздела

Toggles (кнопки и аккордеоны)

Этот рецепт позволяет удобно и просто создавать динамичные кнопки прямо внутри wiki-конента или меню сайта. Редакторам сайта это дает возможность делать контент динамичным, более структурированным, создавать "аккордеоны", группируя нескольких кнопок. Администраторы могут делать лаконичные динамично раскрывающиеся меню.

В Rext используется несколько способов создания кнопок, базирующихся на ToggleNext. Более синтаксически удобные способы требует JS и менее масштабируемы, и наоборот.

Что это делает?

Позволяет прямо в контенте создавать разнообразные кнопки и аккордеоны с помощью следующих синтаксических конструкций: !!!!, (:details summary="...":), >>pmtoggle<<.

Кнопки и аккордеоны позволяют представлять контент более доступно для восприятия, скрывая второстепенную информацию.

Демо

На базе <h4> !!!!

Этот метод суть применение рецепта ToggleNext дополнительно к <h4>. Его удобство в в первую очередь в простоте разметки. Вы можете создавать аккордеоны просто с помощью обычных удобных заголовков.

Вот как это выглядит: 
!!!!А можно ли называть группы по-русски?
А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.
!!!!Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?
Конечно! Она реализована на уровне ядра!
!!!!Что еще классного есть в PmWiki?
>>a<<
Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой. 

Это на редкость удобная возможность, особенно для написания технических материалов. 
>><<

А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?

Конечно! Она реализована на уровне ядра!

Что еще классного есть в PmWiki?

Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов.

На базе <h4 class='center-block'> !!!!%apply=block center-block%

Отличия чисто визуальные.

Вот как это выглядит: 
!!!!%apply=block center-block%А можно ли называть группы по-русски?
А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.
!!!!%apply=block center-block%Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?
Конечно! Она реализована на уровне ядра!
!!!!%apply=block center-block%Что еще классного есть в PmWiki?
>>a<<
Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой. 

Это на редкость удобная возможность, особенно для написания технических материалов. 
>><<

А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?

Конечно! Она реализована на уровне ядра!

Что еще классного есть в PmWiki?

Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов.

На базе <details> (:details summary="...":)

По сути это легкая стилизация встроенной в ядро PmWiki поддержки html5-тега <details>, работающей без JavaScript.

Вот как это выглядит: 
(:details summary="А можно ли называть группы по-русски?":)
А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.
(:detailsend:)
(:details summary="Короткий вопрос можно?":)
Можно!
(:detailsend:)
(:details summary="Что еще классного есть в PmWiki?":)
Ну вот например: для оформления страницы можно дописать CSS-код прямо на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов. 
(:detailsend:)
(:details summary="Есть ли возможность прикрутить к PmWiki подстветку синтаксиса?":)
Конечно! Она реализована и доступна на уровне ядра!
(:detailsend:)
А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Короткий вопрос можно?

Можно!

Что еще классного есть в PmWiki?

Ну вот например: для оформления страницы можно дописать CSS-код прямо на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов.

Есть ли возможность прикрутить к PmWiki подстветку синтаксиса?

Конечно! Она реализована и доступна на уровне ядра!

Этот метод удобен для создания коротких пояснений, не нагружающих страницу визуально.

На базе стилизации <details> под <h4> добавляем class=h4

Зачем? Затем, что дефолтным состоянием (раскрыт/закрыт) <details> можно управлять, а h4 нельзя.

Это выглядит очень похоже на <h1>, но все-таки не идентично:: 
(:details summary="А можно ли называть группы по-русски?" class=h4 open=open:)
А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.
(:detailsend:)
(:details summary="Короткий вопрос можно?" class=h4:)
Можно!
(:detailsend:)
(:details summary="Есть ли возможность прикрутить к PmWiki подстветку синтаксиса?" class=h4:)
Конечно! Она реализована и доступна на уровне ядра!
(:detailsend:)
А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Короткий вопрос можно?

Можно!

Есть ли возможность прикрутить к PmWiki подстветку синтаксиса?

Конечно! Она реализована и доступна на уровне ядра!

Этот метод удобен для создания меню, раскрытых в зависимости от каких-то условий.

На базе остального синтаксиса ToggleNext >>pmtoggle<<

Это просто визуальная стилизация остальных методов создания тогглов, используемых в ToggleNext по-умолчанию: div.pmtoggle, p.pmtoggle, dl.pmtoggle dt.

Это выглядит также: 
>>pmtoggle<<
This line will toggle the next element
>>next<<
This is the hidden section. It doesn't need to have the wikistyle "next".

It can have multiple paragraphs.
>>pmtoggle<<
Another clickable line
>>q<<
Another hidden section.
>>pmtoggle<<
This one hides a table -- the next element is a table not a div.
>><<
|| class="table simpletable" width=200
||! h ||! h ||! h ||
||  a ||  b ||  c ||
||  a ||  b ||  c ||
||  a ||  b ||  c ||

: %list pmtoggle% A definition list : The definition data is hidden.
: Another term : Another data.
: This can go on : Another hidden information.

This line will toggle the next element

Another clickable line

Another hidden section.

This one hides a table — the next element is a table not a div.

hhh
abc
abc
abc
A definition list
The definition data is hidden.
Another term
Another data.
This can go on
Another hidden information.

Когда и что применять?

Методы <h4> -- !!!! удобны своим синтаксисом и несут семантическую нагрузку, но работают через JS и не поддерживают настройки состояния по-умолчанию (при загрузке страницы).
Методы <details> менее удобны синтаксически, но работают без JS и поддерживают настройку состояния по-умолчанию (при загрузке страницы).
Методы >>pmtoggle<< в определенных обстоятельствах синтаксически удобнее чем h4, не несут семантической нагрузки.

Так что использовать? Частное мнение состоит в том, что в большинстве случаев следует:

  • в контенте использовать <h4> -- !!!! и <details> , в зависимости от визуальных потребностей;
  • в меню использовать <details>;
  • >>pmtoggle<< использовать тогда, когда он синтаксически удобнее прочих методов.

Техническая информация

Требования и применение

Подключение рецепта состоит во включении файла phToggles.less в верстку сайта. Файл использует переменные Bootstrap из thisSite.tmpl. Рецепт не требует никаких настроек и реализован целиком на CSS.

Синтаксис

Заголовок h4

Базовый способ, вызов через !!!!

Стилизованный заголовок h4

Тот же h4, но выглядит по-другому: !!!!%apply=block center-block%
Чтобы поместить в блок сложный многострочный контент окружайте его в (:div:)...(:divend:)

HTML5-тег <details>

Работает без JavaScript:

  • (:details summary="...":) ... (:detailsend:) — обычный вызов;
  • (:details summary="..." open=open:) — вызов в изначально открытом состоянии;
  • (:details summary="..." class=h4 :) — вызов в визуальной стилизации под h4

Встроенный в PmWiki синтаксис >>pmtoggle<<

Чем он удобен? Специальными возможностями применения.

Простой синтаксис: 

>>pmtoggle<<
Первая кнопка
>>a<<
Первый контент.

Можно не беспокоиться об обвязке многострочного контента в ''(:div:)''
>>pmtoggle<<
Вторая кнопка
>>alert alert-info<<
Вместо «а» могут быть любые символы или реально существующие классы. 
>><<

Совместимость с PmWiki:PageTextVariables: 

: %list pmtoggle% Var1 : Каждая кнопка аккордеона
: Var2 : становится переменной
: Var3 : содержащей открываемое ею значение
[[<<]]

Служебная информация

Status
stable
Core
yes
Version
20200227