Вкладки Easy Tabs

jаvascript для создания вкладок EasyTabs. Компактный и совместим со всеми браузерами.

Основная информация о плагине

• Бесплатен для частного и коммерческого использования
• Успешно протестирован в IE5.0, IE5.5, IE6, IE7, Firefox 2, Opera 9.2
• Если jаvascript отключен - все содержимое вкладок видно
• По вкладкам можно перемещаться с помощью клавиши TAB
• Можно добавить неограниченное количество tabmenu
• Можно указать, какая вкладка будет активной при запуске
• Вкладки могут меняться по клику или при наведении мыши (onmouseover - onclick)
• А можно установить на каждую вкладку tabmenu ссылку в href и удалить onclick="return false"

HTML

Разметка для Демо 1:

<!--Start of the Tabmenu1 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">Tab 3 </a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;"  title="" id="tablink4">Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu1 -->
<!--Start Tabcontent 1 -->
<div id="tabcontent1">Контент 1</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="tabcontent2">Контент 2</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="tabcontent3">Контент 3</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="tabcontent4">Контент 4</div>
<!--End Tabcontent 4-->
<a href="#" onmousedown="jаvascript:stop_autochange(); return false;">Остановить смену</a> | <a href="#" onmousedown="jаvascript:restart_autochange(); return false;">Перезапустить (если остановлено)</a>
<div style="background-color:#efefef; margin-top:25px; padding:8px;">
<strong>Настройки для этого меню:</strong><br/>
<strong>loadtabs = 2</strong> (При запуске запускается tab 2)<br/>
<strong>autochangemenu = 1 </strong>(настройки автосмены для первого меню (в данном примере только одно меню, таким образом мы можем установить параметр либо 1, либо 0 - если не хотите автосмену вкладок)<br/>
<strong>changespeed = 3 </strong>(менять каждые 3 секунды)<br/>
<strong>stoponhover = 0 </strong>(не останавливать автосмену при наведении мышки)</div>

CSS

Пример CSS для Демо 1 - можно вынести в отдельный файл:

body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
/*Пример стилизации меню*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px;width:200px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px;  border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold;  position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {border:1px solid #ececec; width:198px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}

JS

Скрипт для Демо 1. Также можно вынести в отдельный файл:

/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/
//EASY TABS 1.2 - MENU SETTINGS
//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink")
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent") 
//Set the number of your tabs
var tabcount = new Array("4")
//Set the Tab wich should load at start (In this Example:Tab 2 visible on load)
var loadtabs = new Array("2")  
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 1;
//the speed in seconds when the tabs should change
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;
//END MENU SETTINGS
/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}

Настройки для Демо 1

//Указать навзвание id ваших tablink (без цифры вконце)
var tablink_idname = new Array("tablink")
//Указать навзвание id ваших tabcontentarea (без цифры вконце)
var tabcontent_idname = new Array("tabcontent") 
//Указать количество ваших вкладок (tab)
var tabcount = new Array("4")
//Указать вкладку, которая будет загружаться первой (В этом примере:Tab 2 видна при загрузке)
var loadtabs = new Array("2")  
//Указать номер меню для которого использовать автосмену вкладок (если не хотите использовать, поставьте 0)
var autochangemenu = 1;
//скорость смены вкладок в секундах
var changespeed = 3;
//должна ли автосмена вкладок останавливать при наведении курсора на вкладку? 0=нет 1=да
var stoponhover = 0;