Делаем закладки - дабы вмещать больше
Данный материал будет полезен тем – кому необходимо разместить 2 и более страниц на одной с быстрым переключением между ними не вызывая повторной загрузки страницы.
Сделать это довольно просто, все, что нам понадобится это копировать, вставлять, сохранять – а затем под себя редактировать. Я бы мог и подробно всё расписывать – но не умею сложно объяснять.
Приготовим оформление для страницы (папки) с закладками в CSS:
Создаём файл
style.css (или как вам нравится) заносим в него
css код:
.tabsheets, .tabsheets dt, .tabsheets dd{margin: 0;padding: 0;width: auto;border: none;}
dl.tabsheets dt, dl.tabsheets dd{background-color: ThreeDFace;color: ButtonText;border: 1px solid ThreeDFace;border-top-color: ThreeDHighlight;border-right-color: ThreeDShadow;border-bottom-color: ThreeDShadow;border-left-color: ThreeDHighlight;}
.tabsheets{position: relative;padding: 0;margin-bottom: 10px;}
.tabsheets dt{float: left;padding: 0.2em 1em;cursor: default;white-space: nowrap;margin-top: 0.1em;margin-bottom: -0.2em;}
.tabsheets dt.active{background-color: ButtonHighlight;color: ButtonText;margin-top: 0;padding-bottom: 0.3em;}
.tabsheets dd{position: absolute;width: 100%;display: block;left: 0;margin: 1.6em 0 1em 0;padding: 0;}
.tabsheets dd .reducer{margin: 1em;}
.tabsheets dd.inactive{display: none;}
.tabsheets dd.inactive iframe, .tabsheets dd.inactive select, .tabsheets dd.inactive textarea, .tabsheets dd.inactive input{display: none ! important;}
.tabsheets dd.active{display: block;}
.tabsheets .reducer{margin: 1em;}
Сохраняем файл, далее потребуется
JS, скрипт также берём уже готовый:
Создаём файл
javas.js и пишем в него
js код:
function Make_Tabsheet(){
var i, j, k, eDD, iMax_height, iDT_height, aeDL_child, sDD_inner_HTML
var bFirst_tab = true
var aeDl = document.getElementsByTagName( "DL" )
for( i = 0 ; i < aeDl.length ; i++ ){
if( aeDl[i].className == "tabsheets" ){
aeDL_child = aeDl[i].childNodes
iMax_height = 0
for( j = 0 ; j < aeDL_child.length ; j++ ){
if( aeDL_child[j].nodeName == "DT" ){
iDT_height = aeDL_child[j].offsetHeight
aeDL_child[j].unselectable = true
aeDL_child[j].onmousedown = Switch_sheet
eDD = aeDL_child[j]
while( eDD.nextSibling ){
eDD = eDD.nextSibling
if( eDD.nodeName == "DD" ){
if( eDD.offsetHeight > iMax_height ){
iMax_height = eDD.offsetHeight
}
if( !bFirst_tab ){
eDD.className = "inactive"
}else{
aeDL_child[j].className = "active"
}
bFirst_tab = false
break
}
}
}
}
aeDl[i].style.height = (iMax_height + iDT_height) * 1 + "px"
for( j = 0 ; j < aeDL_child.length ; j++ ){
if( aeDL_child[j].nodeName == "DD" ){
aeDL_child[j].style.height = iMax_height + "px"
}
}
}
return true
}
}
function Switch_sheet( e ){
var eTab = e ? e.target : window.event.srcElement
if( eTab.nodeType == 3){
eTab = eTab.parentNode
}
var eSheet = eTab
while( eSheet.nextSibling ){
eSheet = eSheet.nextSibling
if( eSheet.nodeName == "DD" ){
break
}
}
if( eSheet.className == "inactive" ){
eTab.className = "on"
var aeDL_child = eTab.parentNode.childNodes
for( var i = 0 ; i < aeDL_child.length ; i++ ){
if( aeDL_child[i].nodeName == "DT" && aeDL_child[i].className != "on" ){
aeDL_child[i].className = ""
}else if( aeDL_child[i].nodeName == "DD" ){
aeDL_child[i].className = "inactive"
}
}
eSheet.className = "active"
eTab.className = "active"
}
return false
}
Сохраняем.
Выбираем файл страницы, где будут закладки (как пример
index.html) и пишем следующий код в него:
<head>
<link rel="stylesheet" type="text/css" href="style.css" mce_href="style.css" />
<script type="text/javascript" src="javas.js" mce_src="javas.js"></script>
</head>
<div style="background: ButtonFace; padding: 1em;">
<dl class="tabsheets">
<dt>Закладка 1</dt>
<dd>
<div class="reducer">
<p>Содержимое закладки номер раз.</p>
</div>
</dd>
<dt>Закладка 2</dt>
<dd>
<div class="reducer">
<p>Содержимое закладки номер два.</p>
</div>
</dd>
<dt>Закладка 3</dt>
<dd>
<div class="reducer">
<p>Содержимое закладки номер три.</p>
</div>
</dd>
</dl>
</div>
<script type="text/javascript">
Make_Tabsheet();
</script>
Не сохраняем пока, так как вам придётся его редактировать как вам необходимо.
Даём закладкам имена, между тэгами
<dt>Имя закладки
</dt> и содержимое закладок между тэгами
<dd>Содержимое
</dd>.
Остальные моменты, такие как содержимое
css и
js файлов тема уже отдельная, хотя возможно вы способна разобраться самостоятельно – если нет, то и не надо их трогать – пока нет познаний.
Удачи!
