Создание навигации в виде табов в Liferay

Небольшой пошаговый мануал по созданию навигации в виде табов.

Итак, исходный материал - пустая страница, макет - одна колонка:

У страницы "Табы" создадим ещё две дочерних - "таб2" и "таб3":

Страницам "Табы", "таб2" и "таб3" сопоставлены короткие url "/web/7cogs/tab1", "/web/7cogs/tab2" и "/web/7cogs/tab3" соответственно.
На каждую страницу помещаем в самом верху портлет Отображение сетевого контента:

В настройках внешнего вида портлетов снимаем галочку Показывать обрамление.
На странице "Табы" добавляем в портлет отображения сетевого контента следующее содержимое:

<ul class="ui-tabs">
<li class="current"><a href="/web/7cogs/tab1">Таб 1</a></li>
<li><a href="/web/7cogs/tab2">Таб 2</a></li>
<li><a href="/web/7cogs/tab3">Таб 3</a></li>
</ul>

На страничке "таб2":

<ul class="ui-tabs">
<li><a href="/web/7cogs/tab1">Таб 1</a></li>
<li class="current"><a href="/web/7cogs/tab2">Таб 2</a></li>
<li><a href="/web/7cogs/tab3">Таб 3</a></li>
</ul>

Ну и далее соответственно.

Если есть желание сделать вложенные табы, тогда можно использовать конструкцию вроде этой:

<ul class="ui-tabs">
<li><a href="/web/7cogs/tab1">Таб 1</a></li>
<li><a href="/web/7cogs/tab2">Таб 2</a></li>
<li class="current"><a href="/web/7cogs/tab3">Таб 3</a></li>
</ul>
<ul class="ui-tabs">
<li class="current"><a href="/web/7cogs/tab3">Таб 3_1</a></li>
<li><a href="/web/7cogs/tab4">Таб 4</a></li>
</ul>

По мотивам заметки.