2 746 Скрипты / Tabs

Вкладки 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:

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 5pxborder-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. Также можно вынести в отдельный файл:

Настройки для Демо 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;
Скачать 430Загрузок 3,14 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи