AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Вкладки

Система вкладок позволяет компактно на одной странице разместить разнообразную, структурированную информацию.
Например, заправка картриджей в разрезе производителей, описание особенностей отправки СМС, варианты формирования карты сайта.

Вкладка 1 Вкладка 2 Вкладка 3 FAQ Помощь
Содержимое вкладки № 1
Содержимое вкладки № 2
Содержимое вкладки № 3
Содержимое вкладки № 4
Содержимое вкладки № 5
Содержимое вкладки № 6

Вкладки формируются с помощью javascript + стилей. Удобство представленного здесь скрипта - это его универсальность. Достаточно задать стили у тегов SPAN и DIV и вкладки будут сформированны автоматически. Ограничение этого приема - на одной странице может быть только одна группа вкладок, но в большинстве случаев большего и не нужно.
Html - код формирующий вкладки:

<!-- вкладки -->
<span class="layer act" onClick='layer(0)'>Вкладка 1</span>
<span class="layer" onClick='layer(1)'>Вкладка 2</span>
<span class="layer" onClick='layer(2)'>Вкладка 3</span>
<!-- это блок вкладок сдвинутый в правый край -->
<span class="layer" style='float:right' onClick='layer(4)'>FAQ</span>
<span class="layer" style='float:right' onClick='layer(5)'>Помощь</span>
<!-- блоки информации -->
<div class="layer act">
    Содержимое вкладки № 1
</div>
<div class="layer">
    Содержимое вкладки № 2
</div>
<div class="layer">
    Содержимое вкладки № 3
</div>
<div class="layer">
    Содержимое вкладки № 4
</div>
<div class="layer">
    Содержимое вкладки № 5
</div>
<div class="layer">
    Содержимое вкладки № 6
</div>

Вкладки нумеруются с нуля. Отсчет идет в порядке их размещения в HTML коде.
Рассмотрим стили, формирующие вкладки:

/* вкладки */
SPAN.layer{
  	cursor:pointer;
        text-decoration:none;
        border:1px solid #555555;
        border-bottom:0;
	border-radius:7px 7px 0 0;
	-webkit-border-radius:7px 7px 0 0;
	-moz-border-radius:7px 7px 0 0;
	padding: 4px;
	font-size:11px;
	line-height:18px;
	display:inline-block;
	text-align:justify;
	text-indent:0;
}
SPAN.act{
	background-color:#EEEEEE;
	font-weight:bold;
}
/* блоки информации */
DIV.layer{
        border:1px solid #555555;
	width:99%;
	color:#000;
	font:11px Verdana,Geneva,Arial,Helvetica,sans-serif;
	background-color:#EEEEEE;padding:5px;
	display:none;
	line-height:20px;
}
DIV.layer P{
	padding:10px 20px;
}
DIV.act{
	display:block
}

Рассмотрим javascript, позволяющий переключать вкладки на странице.

function layer(a){
    l=getElementsByClass('layer',null,'div');
    for(var i=0;i<l.length;i++)l[i].style.display=(i==a?'block':'none');
    l=getElementsByClass('layer',null,'span');
    for(var i=0;i<l.length;i++){
        l[i].className=(i==a?'layer act':'layer');
    }
}

/* универсальная функция получения всех DOM объектов заданного класса */


function getElementsByClass(searchClass,node,tag){
    var classElements=new Array();
    if ( node == null ) node=document;
    else if(typeof(node)!="object")node=document.getElementById(node); if(!node)return;
    if ( tag == null ) tag='*';
    var els=node.getElementsByTagName(tag);
    var elsLen=els.length;
    var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i=0, j=0; i < elsLen; i++) {
           if ( pattern.test(els[i].className) ) {
                classElements[j]=els[i];
               j++;
          }
    }
    return classElements;
}

.

© Copyright 2008-2016 by KDG