mojoPortal на русском

 

Использование виджетов UI в Вашем контенте

Начиная с версии 2.3.0.4 в cms mojoPortal появилась возможность добавлять некоторые виджеты javascript UI прямо в содержимое. Вы можете добавить их в виде кода, как показано ниже. Или же воспользоваться кнопкой в панели  инструментов редактора (функция называется "Шаблоны").

 fckeditor панель управления

После нажатия на неё откроется диалоговое окно с вариантами шаблонов (закладки, аккордеон и др.) Для добавления необходимо просто нажать на интересующий Вас шаблон.

окно выбора шаблонов контента в fckeditor

Обратите внимание на то, что виджеты jQuery поддерживают различные темы. Вы можете выбрать необходимую тему изменив параметр StyleSheetCombiner в файле layout.master Вашего шаблона.

<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="flick" />

В примере ниже используется тема flick. На текущий момент, доступно 25 тем для jQuery UI:

base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader

Вы можете использовать любую. Обратите внимание на то, что хотя контролер и называется StyleSheetCombiner, он только комбинирует css файлы, указанные в файле style.config Вашего шаблона. И не комбинирует css файлы, загружаемые извне, такие как YUI или jQuery. Они по умолчанию загружаются отдельно из google CDN (Content Delivery Network (Сеть Доставки Контента)), если только не настроена загрузка из локальных папок, как показано в этой статье.

Пример использования jQuery Аккордеон

Раздел 1

Раздел 1 контент

Раздел 2

Раздел 2 контент

Раздел 3

Раздел 3 контент

Раздел 4

Раздел 4 контент

<div class="mojo-accordion">
<h3><a href="#">Раздел 1</a></h3>
<div>
<p>Раздел 1 контент</p>
</div>
<h3><a href="#">Раздел 2</a></h3>
<div>
<p>Раздел 2 контент</p>
</div>
<h3><a href="#">Раздел 3</a></h3>
<div>
<p>Раздел 3 контент</p>
</div>
<h3><a href="#">Раздел 4</a></h3>
<div>
<p>Раздел 4 контент</p>
</div>
</div>

Пример использования jQuery Вкладок

Вкладка 1 контент

Вкладка 2 контент

Вкладка 3 контент

Код выглядит так:

<div class="mojo-tabs">
<ul>
<li><a href="#tab1">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
</ul>
<div id="tab1">
<p>Вкладка 1 контент</p>
</div>
<div id="tab2">
<p>Вкладка 2 контент</p>
</div>
<div id="tab3">
<p>Вкладка 3 контент</p>
</div>
</div>

Пример использования jQuery FAQ ЧАВО

Вопрос 1?
Ответ 1. 
Вопрос 2?
Ответ 2.
Вопрос 3?
Ответ 3.

<dl class="faqs">
    <dt>Вопрос 1?</dt>
    <dd>Ответ 1.&nbsp;</dd>
    <dt><span style="color: rgb(0, 0, 0); font-weight: bold;">Вопрос&nbsp;</span>2.</dt>
    <dd><span style="color: rgb(51, 51, 51);">Ответ 2</span>.</dd>
    <dt><span style="color: rgb(0, 0, 0); font-weight: bold;">Вопрос&nbsp;</span>3?</dt>
    <dd><span style="color: rgb(51, 51, 51);">Ответ&nbsp;</span>3.</dd>
</dl>

Оригинал на английском.

http://mojoportal.net.ua/использование-виджетов-ui-в-вашем-контенте.aspx