TabsBuilder - универсальный создатель HTML-страниц с закладками.
TabsBuilder - это простой в использовании редактор HTML-страниц с закладками. Чтобы создать Web-страницу с закладками с помощью TabsBuilder вам потребуется всего лишь пара минут:
Заметьте, что все внесенные изменения будут моментально отражены в метке Selected, которая находится в самом верху окна TabsBuilder.
После этого, перейдите на закладку NonselectedTab и выставите параметры для неактивной закладки. Эта закладка имеет точно такие же возможности, что и предыдущая. Поэтому задать стиль для HTML-закладок будет достаточно просто.<SCRIPT>).
Если вы уже ввели все заголовки ваших закладок, то нажмите на кнопку Save HTML.... В открывшемся окне выберите файл или введите новое имя для создаваемого файла.
Если взглянуть на HTML-код, генерируемый TabsBuilder, то можно заметить, что данный код весьма читабелен:
<STYLE TYPE="text/css">
<!--
TD.nonSelected {
background-color : #808080;
font-name : "Tahoma";
font-size : 10px;
cursor : hand;
text-align : center;
color : #FFFFFF;
}
A.nonSelected {
font-weight : bold;
text-decoration : none;
font-style : normal;
color : #FFFFFF;
}
TD.selected {
background-color : #C0C0C0;
font-name : "Tahoma";
font-size : 10px;
cursor : hand;
text-align : center;
color : #000000;
}
A.selected {
font-weight : bold;
text-decoration : none;
font-style : normal;
color : #000000;
}
SPAN.tabs {
border-style : solid;
border-width : 1px;
border-color : black;
width : 100%;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var activeTabIndex;
var tabsContents;
function activeTab(tabIndex) {
tdTabs0.className = 'nonSelected';
aTabs0.className = 'nonSelected';
tdTabs1.className = 'nonSelected';
aTabs1.className = 'nonSelected';
tdTabs2.className = 'nonSelected';
aTabs2.className = 'nonSelected';
if ( tabIndex == 0 ) {
tdTabs0.className = 'selected';
aTabs0.className = 'selected';
tabsContents = 'Enter your text to this Tab (0)';
} // if
if ( tabIndex == 1 ) {
tdTabs1.className = 'selected';
aTabs1.className = 'selected';
tabsContents = 'Enter your text to this Tab (1)';
} // if
if ( tabIndex == 2 ) {
tdTabs2.className = 'selected';
aTabs2.className = 'selected';
tabsContents = 'Enter your text to this Tab (2)';
} // if
activeTabIndex = tabIndex;
tabsSpan.innerHTML = tabsContents;
} // activeTab
//-->
</SCRIPT>
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="8">
<TR ID="trTabs">
<TD CLASS="nonSelected" ID="tdTabs0" NAME="tdTabs0"
ONCLICK="activeTab(0);">
<A CLASS="nonSelected" ID="aTabs0" NAME="aTabs0"
HREF="javascript:activeTab(0);">FirstTab</A>
</TD>
<TD WIDTH="15"> </TD>
<TD CLASS="nonSelected" ID="tdTabs1" NAME="tdTabs1"
ONCLICK="activeTab(1);">
<A CLASS="nonSelected" ID="aTabs1" NAME="aTabs1"
HREF="javascript:activeTab(1);">SecondTab</A>
</TD>
<TD WIDTH="15"> </TD>
<TD CLASS="nonSelected" ID="tdTabs2" NAME="tdTabs2"
ONCLICK="activeTab(2);">
<A CLASS="nonSelected" ID="aTabs2" NAME="aTabs2"
HREF="javascript:activeTab(2);">ThirdTab</A>
</TD>
<TD WIDTH="15"> </TD>
</TR>
</TABLE>
<SPAN ID="tabsSpan" NAME="tabsSpan" CLASS="tabs"></SPAN>
Как видно из этого листинга, TabsBuilder генерирует корректную HTML-страницу, но не использует теги <HEAD> и <BODY>; таким образом, вы можете скопировать сгенерированный HTML-код в свою собственную страницу.
Если просмотреть эту страницу в браузере (смотреть), то при запуске страницы выбранных закладок нет. Это не корректная ситуация, так как в теле тега <SPAN> будет просто стоять пробел; но сложившуюся проблему можно легко решить.
Для этого вам необходимо добавить тег <HTML> в начало HTML-страницы, а перед тегом <TABLE>, сгенерированном TabsBuilder, следующий тег <BODY ONLOAD="activePage(0)">. В конце документа не забудьте завершить добавленные теги. Смотрите пример.
Конечно, создать HTML-страницу с закладками с помощью TabsBuilder достаточно просто, но если у вас нет достаточных навыков в программировании на языке JavaScript, то исходные коды, генерируемые данной программой могут показаться слишком сложными. Но не стоит отчайваться и отказываться от использования TabsBuilder, и от возможности создать HTML-страницу с закладками. Все, что вам необходимо это немного подправить сгенерированный HTML-код.
Найдите в исходном тексте документа первую строку "Enter your text to this Tab". Нашли? Если да, то рядом с этой строкой должна быть указана цифра, помещенная в скобках. Теперь нашли?! Если рядом с этой строкой находится число ноль, то это говорит о том, что при нажатии на первую вашу закладку будет отображаться данный текст, теперь попробуйте заменить эту строку следующей:
tabsContents = 'Здесь я могу размещать все, что угодно,' +
'включая <STRONG>теги</STRONG> и специальные символы - &';
Затем, осуществляйте дальнейший поиск строки "Enter your text to this Tab" и заменяйте ее на нужные вам фрагменты.
Как вы заметили, TabsBuilder генерирует весьма простую страницу, в которую вам необходимо будет вносить собственные изменения. В основном эти изменения будут касаться не устройства закладок (содержимое тега <SCRIPT>), а информации, которая отображается в закладках.
Если вы хотите, чтобы ваша закладка отображала большой фрагмент кода, то можете сделать следующий трюк. Добавьте функцию secondTab в тело тега-сценария.
function secondTab() {
S = '<P>Это вторая закладка, содержимое которой задается ' +
'в функции secondTab. Теперь вы можете помещать много текста ' +
'в ваших закладках!</P>' +
'<P>А также рисунки!</P>' +
'<CENTER><IMG SRC="TabsBuilder.png" /></CENTER><BR />' +
'<P>И конечно же <A HREF="http://www.chpas.narod.ru">ссылки</A>.</P>';
return S;
} // secondTab
После этого найдите текст, представленный внизу:
if ( tabIndex == 1 ) {
tdTabs1.className = 'selected';
aTabs1.className = 'selected';
tabsContents = 'Enter your text to this Tab (1)';
} // if
Замените предпоследнюю строку новой строкой:
tabsContents = secondTab();
Но на этом возможности HTML-закладок не заканчиваются. Ведь все, что мы сделали до этого должно содержаться в тексте сценария; но ничего не запрещает обращаться к другим страницам или даже сайтам с помощью закладок.
Если вы хотите это сделать, то замените строку, в которой встречается присваивание tabsContents на следующий код:
location.href = 'TabsBuilder_readmeRU.html';
С помощью TabsBuilder вы сможете создать любую по сложности страницу с закладками, ведь TabsBuilder генерирует весьма простой и понятный код. Следует сказать и то, что все созданные страницы-примеры тестировались в нескольких браузерах: Microsoft Internet Explorer 6, Opera 9, Netscape Navigator 9.