Выбор элемента в алфавитном указателе

Abyz - javascript-утилита реализующая выбор элемента (буквы) в алфавитном указателе. Основная задача данной утилиты - уменьшить пространство занимаемое списком букв алфавита(ов) и/или уменьшить шрифт элементов списка (дабы "не кидался" этот блок в глаза), при этом сохраняя удобство в выборе любой буквы из данного списка.

Примеры

Примеры демонстрирующие работу abyz

Как стартануть?

1. Подключаем библиотеку jquery и js-файл abyz:

<script src="query.*.js" language="JavaScript">
</script>
<script src="abyz.0.1.1.js" language="JavaScript">
</script>

2. Создаем таблицу алфавитного указателя. Назначаем идентификатор для данной таблицы, например, my_abyz_table:

<table id="my_abyz_table" cellspacing="0" cellpadding="0">
<tr>
    <td><a href="#link_to_А">A</a></td>
    <td><a href="#link_to_Б">Б</a></td>
    <td><a href="#link_to_В">В</a></td>
    ...
    <td><a href="#link_to_Э">Э</a></td>
    <td><a href="#link_to_Ю">Ю</a></td>
    <td><a href="#link_to_Я">Я</a></td>
</tr>
</table>

3. Создаем объект abyzObject с именем переменной abyzGlobal (область видимости данной переменной должна быть "глобальной"). В качестве параметра в конструктор передаем массив элементов - описание анимации css-атрибутов. Каждый такой элемент является массивом из 3 элементов: [0] - название css-атрибута; [1] - значение, когда курсор не наведен на элемент; [2] - значение, когда курсор наведен на элемент (данные свойства будут применяться к TD-элементам таблицы). После создания объекта запускаем таблицу в обработку методом startup(). В качестве аргумента передаем ссылка на таблицу. Пример:

$(document).ready( function()
{
    // Create object
    abyzGlobal = new abyzObject(
        new Array(
            new Array( 'font-size', '10px', '36px' ),
            new Array( 'padding-left', '1px', '3px' ),
            new Array( 'padding-right', '1px', '3px' )
        )
    );

    // Startup
    abyzGlobal.startup( '.my_abyz_table' );
} );

На текущий момент анимация доступна для следующих css-атрибутов:

font-size
padding-left
padding-right

Примечание: чтобы зафиксировать ячейку (игнорировать анимацию для неё) необходимо указать атрибут для TD-элемента static="true", например:

<td static="true">0-9</a>

Скачать abyz

ТуДу

• при startup() сделать базовую анимацию к исходной позиции;
• пересмотреть код и отказаться от глобальной переменной abyzGlobal;
• дать возможность расширять список css-атрибутов доступных для анимации;