Представление информации в виде картотеки

        Иногда возникает необходимость представления материала в виде картотеки (анкеты, бухгалтерские документы, каталоги и т.п.). Я, к примеру, создал каталог логотипов автомобилей со ссылкой на сайты их производителей. Как правило, такие файлы содержат большой обьем информации и занимают они много места. Чтобы максимально ускорить время загрузки я разделил информацию на отдельные блоки и создал функцию открытия/закрытия блока. Однако, в первоначальном файле эту функцию пришлось записывать полностью для каждого блока отдельно, что весьма увеличивало его обьем. Более опытный товарищ прислал мне изложенный ниже JavaScript, посредством которого созданный мной ранее файл сократился в обьеме почти на половину и стал загружаться на много быстрее.
        Суть механизма проста. При клике на ярлык, открывается блок, при клике на другой ярлык - другой блок.

Все логотипы(клик) ведут на сайт производителя автомобиля
(открыть логотип - клик по букве)

А B C D E G F H I J K L M N O P Q R S T U V Z

        Такой эффект достигается тем, что вся информация излагается в отдельных блоках DIV со своим номером x1, x2, x3 и т.д., которые открываются поочередно. Ниже изложены соответствующие коды для создания такого файла.

        Между тегами head стилями CSS определяем область и порядок вывода ярлыков на экран fieldset, а также открывающейся ими информации liter. Каждый может сделать это на свой вкус, в моем варианте он выглядит так:

<style type="text/css">

fieldset {

border: 1px solid #0000FF;

padding: 3px 4px 4px 4px;

}

.liter { padding: 0px 4px 1px 4px;

background-color: #E0E0E0;

border: solid #0000FF 2px;

color: #0000FF;

font-family: Ariel Black;

font-size: 14px;

font-weight: bold;

}

</style>

        Далее сам механизм открытия.

<script language="JavaScript" type="text/javascript">

var alfavit = new Array("x1","x2","x3","x4","x5","x6"); // тут ID открывающихся букв А=x1, Б=x2 и т.д.

function onOff(masSiv,theIDn) {

for(var j=0; j < masSiv.length; j++) {

if (masSiv[j] == theIDn) {

if (document.getElementById(theIDn).style.display == "block") {

document.getElementById(theIDn).style.display = "none"; }

else { document.getElementById(theIDn).style.display = "block"; }

}

else { document.getElementById(masSiv[j]).style.display = "none"; }

}

}

</script>

        Между тегами body изначально следует ввести предупреждение пользователю на случай, если его браузер не поддерживает JavaScript, тогда он увидит на экране текст заключенный между тегами noscript:

<noscript>

<h3 align="center">ВНИМАНИЕ!!!<br>

В Вашем браузере отключен или не поддерживается JavaScript! Для отображения всех элементов страницы включите JavaScript или обновите браузер.</h3>

</noscript>

        Далее определяем местоположение ярлыков fieldset ALIGN=center и их вид (буквы или рисунки):

<fieldset ALIGN=center>

<br>

<span onClick="onOff(alfavit,'x1')" class="liter">А</span>

<span onClick="onOff(alfavit,'x2')" class="liter"><IMG SRC="URL картинки"></span>

<br>

        Далее в отдельных блоках излагается содержимое, которое будет открываться пользователю при клике на ярлык:

<div id="x1" style="display:none">

<br>

ЗДЕСЬ ИЗЛАГАЕМЫЕ ВАМИ МАТЕРИАЛЫ

</div>

<div id="x2" style="display:none">

<br>

ЗДЕСЬ ИЗЛАГАЕМЫЕ ВАМИ МАТЕРИАЛЫ

</div>

        Каждому блоку принадлежит определенный идентификационный номер id="x1" и при клике на ярлык x1 откроется соответствующий блок и выведет на экран изложенную в нем информацию.
        В моем файле каждый блок выглядит так (ссылки на адрес производителя и логотип):

<div id="x1" style="display:none">

<hr size="1" color="#999999"><br>

<A HREF="http://www.bmw.de/"><IMG SRC="URL картинки"></A>

<A HREF="http://www.buick.com/"><IMG SRC="URL картинки"></A>

<A HREF="http://www.bydauto.com.cn/"><IMG SRC="URL картинки"></A>

<A HREF="http://www.bugatti-cars.de/"><IMG SRC="URL картинки"></A>

</div>

<br>

</fieldset>

        После последнего блока не забудьте указать закрывающий тег /fieldset.

        Таким образом можно создать неограниченную в обьеме картотеку, где лишь одна функция JavaScript, занимающая минимум места в файле, обеспечит быструю загрузку отдельных блоков с информацией.

---