Urbanculture:Документация расширения Morph

 Документация

---

Данное расширение позволяет осуществлять скрытие и отображение контента по принципу слайдшоу. Для удобства применения используйте шаблоны {{MorphH}}, {{MorphV}}, {{MorphFile}}, {{MorphVideo}}, {{MorphQuote}}. Использование «сырого» кода имеет смысл только при количестве слайдов >50 или же, когда шаблон не способен решить поставленную задачу.

Общие характеристики

1. Любой контейнер с классом morphcontainer определяет себя как Morph.
2. Дополнительный класс hover определяет способ выбора через наведение мышью, без — кликом.
3. Дополнительный класс manualsort даёт возможность связывать линки и контенты вручную, без — в порядке соответствия (первый линк к первому контенту). Ручная сортировка расширяет возможности морфа и позволяет связывать с одним линком сразу несколько контентов в произвольном порядке или привязать к одному линку несколько различных групп контентов.
4. Объекты с классами morphprev & morphnext проматывают контенты в порядке чередования (в случае manualsort — в порядке чередования линков).
5. Объекты с классами morphlink_hilight & morphlink_default определяют стили выбранных и неактивных линков соотв. Сами объекты с вышеозначенными классами обязательно должны быть прямыми потомками контейнера morphcontainer. После использования они удаляются из DOMа и в отрисовке страницы не участвуют.
6. Все контенты, не связанные с линком отображаться не будут, но при этом свободные линки будут видны, что как бы должно говорить пользователю, что он что-то делает не так.

Без сортировки

<div class="morphcontainer hover">
<span class="morphlink_hilight" style="cursor: pointer; decoration: underline"></span>
<span class="morphlink_default" style="cursor: pointer; color: gray"></span>
<span class="morphprev"> << </span>
<span class="morphlink">one</span>
<span class="morphlink">two</span>
<span class="morphlink">three</span>
<span class="morphlink">four</span>
<span class="morphnext"> >> </span>
<span class="morphcontent">one</span>
<span class="morphcontent">two</span>
<span class="morphcontent">three</span>
</div>

<< one two three four >> one two three

Ручная связка

1. Для ручной связки контентов с линками в объекте с классом morphcontainer добавляется дополнительный класс manualsort.
2. Связки «линк+контент(ы)» задаются дополнительным идентичным классом в объектах с классами morphlink и morphcontent. Имя дополнительного класса должно начинаться с morph (напр. morph123).
3. Линков ссылающихся на определённые контенты может быть сколько угодно — более того, один линк может ссылаться на более чем одну группу контентов. Количество контейнеров с доп. классом для morphcontent может быть произвольным также.
4. Порядок отображения линков соответствует оному в иерархии объекта morphcontainer; порядок следования в объекте morphcontainer контентов значение имеет только относительно друг друга (в случае отображения множества контентов, привязанных к одному линку).

<div class="morphcontainer manualsort">
<span class="morphprev"> << </span>
<span class="morphlink morphshowall">Показать всё</span>
<span class="morphlink morphcats">Кошки</span>
<span class="morphlink morphdogs">Собаки</span>
<span class="morphlink morphcats morphdogs">Кошки и Собаки</span>
<span class="morphlink morphbirds">Птицы</span>
<span class="morphlink morphhideall">Скрыть всё</span>
<span class="morphnext"> >> </span>
<div class="morphcontent morphcats morphshowall">Левъ</div>
<div class="morphcontent morphcats morphshowall">Тигра</div>
<div class="morphcontent morphdogs morphshowall">Волк</div>
<div class="morphcontent morphbirds morphshowall">Пингвин</div>
<div class="morphcontent morphdogs morphshowall">Шариков</div>
<div class="morphcontent morphcats morphshowall">Киска</div>
<div class="morphcontent morphbirds morphshowall">Петух</div>
</div>

<< Показать всё Кошки Собаки Кошки и Собаки Птицы Скрыть всё >>

Левъ

Тигра

Волк

Пингвин

Шариков

Киска

Петух

Примеры

1

←← →→ one two three one * two two * one three * two * one

2

and one * two and two * and one and three * and two * one << one two 3 >>

3. В вики-таблице

{|class="wikitable morphcontainer"
|class="morphlink"|1
|class="morphlink"|2
|class="morphlink"|3
|- class="morphcontent"
|colspan="3"|one
|- class="morphcontent"
| colspan="3"|two
|- class="morphcontent" 
|colspan="3"|three
|}

1	2	3
one
two
three

4. Через шаблон

{{MorphH
|display=block
|spacer= 
|scroll=1
|l3=№3
|l1=№1
|l2=№2
|c2=two
|c3=three
|c1=one}}

<<< >>>  №1 №2 №3  one two three

5. Вложенный морф

1	2	3
1 2 1.1 1.2
1 2 3 2.1 2.2 2.3
1 2 3 4 3.1 3.2 3.3 3.4