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

<div style="clear:both;background:#FFEFD5;border:1px dotted #FFE4B5;padding:10px;margin-top:10px; height: auto;">
<span style="font-size:11pt;line-height:11pt;">[[Файл:20px-Docimage.png|20px|Документация|link=]]  Документация</span>
----
Данное расширение позволяет осуществлять скрытие и отображение контента по принципу слайдшоу. Для удобства применения используйте шаблоны {{tp|MorphH}}, {{tp|MorphV}}, {{tp|MorphFile}}, {{tp|MorphVideo}}, {{tp|MorphQuote}}. Использование «сырого» кода имеет смысл только при количестве слайдов >50 или же, когда шаблон не способен решить поставленную задачу.

== Общие характеристики ==
# Любой контейнер с классом <code>morphcontainer</code> определяет себя как Morph.
# Дополнительный класс <code>hover</code> определяет способ выбора через наведение мышью, без — кликом.
# Дополнительный класс <code>manualsort</code> даёт возможность связывать линки и контенты вручную, без — в порядке соответствия (первый линк к первому контенту). Ручная сортировка расширяет возможности морфа и позволяет связывать с одним линком сразу несколько контентов в произвольном порядке или привязать к одному линку несколько различных групп контентов.
# Объекты с классами <code>morphprev & morphnext</code> проматывают контенты в порядке чередования (в случае <code>manualsort</code> — в порядке чередования линков).
# Объекты с классами <code>morphlink_hilight & morphlink_default</code> определяют стили выбранных и неактивных линков соотв. Сами объекты с вышеозначенными классами <u>обязательно</u> должны быть прямыми потомками контейнера <code>morphcontainer</code>. После использования они удаляются из DOMа и в отрисовке страницы не участвуют.
# Все контенты, не связанные с линком отображаться не будут, но при этом свободные линки будут видны, что как бы должно говорить пользователю, [[ЧЯДНТ|что он что-то делает не так]].

== Без сортировки ==
 <nowiki><div class="morphcontainer </nowiki>''{{ct|hover|green}}''<nowiki>"></nowiki>
 {{ct|''<nowiki><span class="morphlink_hilight" style="cursor: pointer; decoration: underline"></span></nowiki>''|green}}
 {{ct|''<nowiki><span class="morphlink_default" style="cursor: pointer; color: gray"></span></nowiki>''|green}}
 <nowiki><span class="morphprev"> << </span></nowiki>
 <nowiki><span class="morphlink">one</span></nowiki>
 <nowiki><span class="morphlink">two</span></nowiki>
 <nowiki><span class="morphlink">three</span></nowiki>
 {{ct|<nowiki><span class="morphlink">four</span></nowiki>|red}}
 <nowiki><span class="morphnext"> >> </span></nowiki>
 <nowiki><span class="morphcontent">one</span></nowiki>
 <nowiki><span class="morphcontent">two</span></nowiki>
 <nowiki><span class="morphcontent">three</span></nowiki>
 <nowiki></div></nowiki>

<div class="morphcontainer hover">
<span class="morphlink_hilight" style="cursor: pointer; text-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>

== Ручная связка ==
# Для ручной связки контентов с линками в объекте с классом <code>morphcontainer</code> добавляется дополнительный класс <code>manualsort</code>.
# Связки «линк+контент(ы)» задаются дополнительным идентичным классом в объектах с классами <code>morphlink</code> и <code>morphcontent</code>. Имя дополнительного класса <u>должно</u> начинаться с <code>morph</code> (напр. ''<u>morph</u>123'').
# Линков ссылающихся на определённые контенты может быть сколько угодно — более того, один линк может ссылаться на более чем одну группу контентов. Количество контейнеров с доп. классом для <code>morphcontent</code> может быть произвольным также.
# Порядок отображения линков соответствует оному в иерархии объекта <code>morphcontainer</code>; порядок следования в объекте <code>morphcontainer</code> контентов значение имеет только относительно друг друга (в случае отображения множества контентов, привязанных к одному линку).

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

<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 ===
<span class="morphcontainer hover">
<span class="morphlink_hilight" style="color:red"></span>
<span class="morphlink_default" style="color:green; cursor: pointer"></span>
<span class="morphprev"> ←← </span>
<span class="morphnext"> →→ </span>
<span class="morphlink sect1">one</span>
<span class="morphlink sect2">two</span>
<span class="morphlink sect3">three</span>
<span class="morphcontent sect1">one * two</span>
<span class="morphcontent sect2">two * one</span>
<span class="morphcontent sect3">three * two * one</span>
</span>

=== 2 ===
<span class="morphcontainer">
<span class="morphcontent">and one * two</span>
<span class="morphcontent">and two * and one</span>
<span class="morphcontent">and three * and two * one</span>
<span class="morphprev"> << </span>
<span class="morphlink">one</span>
<span class="morphlink">two</span>
<span class="morphlink">3</span>
<span class="morphnext"> >> </span>
</span>

=== 3. В вики-таблице ===
<pre>
{|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
|}
</pre>

{|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
|}

=== 4. Через шаблон ===
<pre>{{MorphH
|display=block
|spacer= 
|scroll=1
|l3=№3
|l1=№1
|l2=№2
|c2=two
|c3=three
|c1=one}}</pre>

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

=== 5. Вложенный морф ===
{|class="wikitable morphcontainer" width="50%"
|class="morphlink"|1
|class="morphlink"|2
|class="morphlink"|3
|- class="morphcontent" align="center"
|colspan="3"|
{|class="wikitable morphcontainer" width="50%"
|class="morphlink"|1
|class="morphlink"|2
|- class="morphcontent" align="center"
|colspan="2"|'''1.1'''
|- class="morphcontent" align="center"
| colspan="3"|'''1.2'''
|}
|- class="morphcontent" align="center"
| colspan="3"|
{|class="wikitable morphcontainer" width="50%"
|class="morphlink"|1
|class="morphlink"|2
|class="morphlink"|3
|- class="morphcontent" align="center"
|colspan="3"|'''2.1'''
|- class="morphcontent" align="center"
| colspan="3"|'''2.2'''
|- class="morphcontent" align="center"
| colspan="3"|'''2.3'''
|}
|- class="morphcontent"  align="center"
|colspan="3"|
{|class="wikitable morphcontainer" width="50%"
|class="morphlink"|1
|class="morphlink"|2
|class="morphlink"|3
|class="morphlink"|4
|- class="morphcontent" align="center"
|colspan="4"|'''3.1'''
|- class="morphcontent" align="center"
| colspan="4"|'''3.2'''
|- class="morphcontent" align="center"
| colspan="4"|'''3.3'''
|- class="morphcontent" align="center"
| colspan="4"|'''3.4'''
|}
|}

</div>
[[Категория:Urbanculture:Документация]]