TabsBuilder

TabsBuilder - это простой в использовании редактор HTML-страниц с закладками. Чтобы создать Web-страницу с закладками с помощью TabsBuilder вам потребуется всего лишь пара минут:


TabsBuilder - универсальный создатель 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> и специальные символы - &amp;';

Затем, осуществляйте дальнейший поиск строки "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.



Автор © Иван Чередниченко, 2009. Все права защищены.
http://www.quickpage.narod.ru