MenuTab javascript свитчер

Иногда есть необходимость создать меню в своем javascript приложении в виде плашек, будь то вертикальное или горизонтальное меню, но пользователю необходимо как то выделять выбранную табу.

Когда у меня возникла такая необходимость я быстро набросал следующий класс, который взял на себя всю работу по созданию меню и по переключению между пунктами меню.

Немного теории. Я использовал следующую дом структуру для меню

<ul class="intabs">

<li><a>Create</a></li>

<li class="sel"><a>View</a></li>

</ul>
 

Как видно выбранный пункт имеет отличие лишь в содержании у себя класса sel. Теперь собственно приступим к программированию. Для начала будьте уверены в том что вы используете также как и я библиотеку prototype. Создаем экземпляр класса через

var MenuTab = Class.create();
 

В своем классе я хочу хранить и иметь доступ ко всем пунктам меню, следовательно необходим массив. И помимо него небольшие настройки для характеристики лейаута меню, название класса меню и название класса выбранного пункта.

// здесь замените класс на свой

this.menuClass = "intabs";

// ну и здесь до кучи

this.selectedItemClass = "sel";

this.menuItems = new Array();
 

Элементы меню создаются в отдельной функции. И необходимости в том чтобы создавать каждый элемент в отдельности через DOM смысла не имеет. За основной элемент можно взять только тот элемент который является общим и составляет структуру пункта меню. В моем случае это <li>. В случае с внутренней структурой этого элемента я предпочел использовать класс Template

var item = document.createElement('li');

var tmpl = new Template('<span class="ltab"></span><a>#{title}</a>');

item.innerHTML = tmpl.evaluate({title : menuTabTitle});

// вставка пункта в главный контейнер, который содержит все меню
 

Каждый элемент меню сохраняется в массив для дальнейшего использования. По сути код который генерирует меню уже готов, но в нем нет функционала. Чтобы добавить его надо задать новые переменные-члены класса selectedTab, который хранит состояние текущего пункта. Обычно он первый, в моем приложении он был вторым. У вас он может быть десятым. Событие которое будет выполнятся когда пользователь выбирает плашку в дом называется onclick.

Element.removeClassName(this.selectedTab, this.selectedItemClass);
this.selectedTab = item;
Element.addClassName(this.selectedTab, this.selectedItemClass);
 

Код должен выполняться в пространстве главного класса иначе доступ к переменным класса вы не получите.

Автор: http://hash.naikonsoft.com