Этот вид поведения дает разработчикам возможность создавать похожие на вкладки панели в интерфейсе HTML-страницы. Такая возможность оказывается удобной, когда требуется отобразить дополнительные сведения на экране, вписывающемся в одну страницу. Ниже показан код экрана Global Configuration, на котором применяется поведение switcher.

По своим функциям это поведение аналогично подменю. После выбора каждой ссылки отображаются сведения, связанные с соответствующей панелью формы, определяемой элементом div в разметке документа. Отличие заключается в том, что поведение switcher позволяет загрузить все сведения на целом экране в одном цикле запроса. Одновременно отображаются данные, выводимые на одну панель, но в документе присутствуют все панели, и поэтому их смена происходит очень быстро, не требуя загрузки новой панели с веб-сервера. И все это достигается благодаря ненавязчивости JavaScript, которая проявляется в том, что в атрибут style вносятся изменения с целью скрыть все панели, кроме отображаемой.

Рассмотрим подробнее действие данного вида поведения на примере экрана Global Configuration. Если заглянуть в папку administrator/components/com_config/views/application/tmpl, то в ней можно обнаружить 17 различных файлов компоновки. Первым из них загружается файл компоновки default. php. Ниже приведена первая часть этого файла.

defined('_JEXEC) or die;

// загрузить поведение всплывающих подсказок
// загрузить шаблон подменю, используя идентификатор элемента 'submenu', требующийся для метода поведения behavior.switcher

JHtml_('behavior.tooltip');
JHtml_('behavior.switcher');
JHtml_ ('behavior.formvalidation');
$this->document->setBuffer ($this->loadTemplate ('navigation'), 'modules' , 'submenu') ;

В приведенный выше код сначала вводится вызов метода поведения behavior, switcher для загрузки требующегося сценария JavaScript. Затем в выделенной полужирным строке кода формируются ссылки на подменю. В этой строке кода выполняется файл компоновки default-navigation.php, а результат выводится на месте расположения модуля, обозначаемом как submenu.

В файле default-navigation.php содержится следующий код:

<ul  id="submenu">
<li><a href="#" onclick="return false;" id="site"  class="active">
<?php echo  JText::_('JSITE'); ?></a></li>
<li><a href="#" onclick="return false;" id="system"><?php  echo  JText: :_('COM_CONFIG_SYSTEM'); ?></a></li>
<li><a href="#" onclick="return false;" id="server"><?php  echo  JText: :_('COM_CONFIG_SERVER'); ?></a></li>
<li><a href="#" onclick="return false;" id="permissions"> ^<?php echo JText: :_('COM__CONFIG_PERMISSIONS'); ?></a></li>
</ul>

В этом коде создается элемент разметки ul с идентификатором подменю, что очень важно. Ведь это обстоятельство используется в селекторе JavaScript для указания на то, что данный список ссылок будет служить для смены панелей. А в каждом элементе разметки li определяется ссылка на одну из панелей, выводимых на экран с поведением switcher. Имя панели указывается в атрибуте id. В определении первой ссылки атрибуту class присваивается значение active, как выделено полужирным в приведенном выше коде. Этим пользователю дополнительно указывается на то, что данная панель активна.

А теперь вернемся к файлу компоновки default.php. В следующей его части находится код для ввода сценария JavaScript, активизирующего рассматривавшееся ранее поведение для проверки достоверности данных в форме. Далее следует приведенный ниже код.

<form action="<?php echo JRoute::_('index.php?option=com_config');?>" id="application-form" method="post" name="adminForm" class="form-validate">
<?php  if ($this->ftp) : ?>
<?php echo $this->loadTemplate('ftplogin'); ?> <?php endif; ?> <div id="config-document">
<div id="page-site"> <div>
<div>
<?php echo $this->loadTemplate ('site'); ?> <?php echo $this->loadTemplate('metadata'); ?> </div> <div>
<?php echo $this->loadTemplate('seo'); ?> <?php echo $this->loadTemplate('cookie'); ?> </div> </div> </div>

В первой строке этого кода создается обычная форма. Затем загружается страница регистрации на FTP-сервере, если такая возможность имеется. В двух последующих строках кода выполняются действия, очень важные для поведения switcher, поэтому они и выделены полужирным. В первой из них создается элемент разметки div с атрибутом id="conf ig-document". Этот элемент разметки служит контейнером для всех панелей, которые будут действовать под управлением поведения switcher. Во второй строке кода создается первая панель. Для этой цели служит элемент разметки div с атрибутом id, имеющим значение page-ххх, где ххх совпадает с идентификатором элемента привязки а в разметке подменю. Данной панели необходимо также присвоить класс вкладки, что для чего служит атрибут.

Далее следуют четыре выделенные полужирным строки кода В каждой из них компоновка загружается на нужное место страницы. Например, первой загружается компоновка из файла default-site. php, а второй — компоновка из файла default-metadata. php.

После этого следует приведенная ниже строка кода.

<div id="page-system" >

В этой строке кода создается вторая панель, соответствующая ссылке на систему в подменю. Еще далее создается панель для страницы сервера (page-server), а затем панель для страницы полномочий (page-permissions). Для каждой из них загружается один или более сценарий компоновки. Когда страница загружается в первый раз, функция JavaScript проверяет, какая именно панель должна отображаться. Для запоминания пользователя, работавшего с панелью в последний раз, используется cookie-файл. В отсутствие cookie-файла по умолчанию отображается первая панель.

Функция JavaScript действует следующим образом. В ней создается массив элементов разметки div с атрибутом. Эти элементы разметки служат контейнерами для панели каждой вкладки. Так, для отображаемой панели в данной функции динамически создается атрибут style = "display: block; ", а для всех остальных панелей — атрибут style = "display: none; ". Когда пользователь щелкает кнопкой мыши на ссылке подменю, данный процесс повторяется. Элемент разметки div, соответствующий выбранной пользователем ссылке, динамически обновляется (его атрибуту style присваивается значение "display: block;"), а следовательно, определяемая им панель отображается, тогда как остальные панели скрываются (атрибутам style их элемента разметки div присваивается значение "display: none; ").

Это относительно простой и удобный способ реализации подобного рода поведения. Ведь файл компоновки каждой панели очень прост, что позволяет легко изменить расположение вкладок на странице или создать новые вкладки. Подобным способом организуется экран, вызываемый по команде Site ^System Information в базовом коде Joomla.

Ниже приведены основные требования к применению поведения switcher.

1. Ввести поведение switcher в компоновку.
2. Создать компоновку, аналогичную рассмотренной ранее компоновке из файла default-navigation.php. Она должна содержать элемент разметки ul с атрибутами id="submenu" и. В этот элемент следует также ввести элементы разметки lie элементами привязки а, указав имя панели (например, "site", "system" и т.д.) в атрибуте id каждого элемента привязки.
3. Загрузить эту компоновку для перемещения по панелям из исходной компоновки (например, на месте модуля подменю).
4. Создать еще одну или несколько компоновок для каждой панели.
5. Создать в исходной компоновке элемент разметки div с атрибутом id="conf ig-document".
6. Создать в этом элементе по одному элементу разметки div на каждую панель. Каждый из этих элементов разметки должен содержать атрибут id со значением "page-ххх", а также атрибут class со значением "tab".
7. Организовать вызов метода loadTemplate () в каждом из упомянутых выше элементов разметки div, чтобы загрузить файлы компоновки отдельных частей страницы.