FRNET.NAROD.RU » Статьи » Создание панели инструментов средствами CSS и JavaScript
  » Навигация
- - - - - - - - - - - - - - - -
  » Наша кнопка
- - - - - - - - - - - - - - - -
   » Создание панели инструментов средствами CSS и JavaScript
 
Автор: Алексей Голубев

Сайт: http://www.frnet.narod.ru/

В большинстве приложений Windows присутствует такой элемент управления как панель инструментов. Вот пример подобной панели инструментов:

Пример панели инструментов

Конечно приведенный пример – это упрощенная панель инструментов, однако прочитав данную статью вы без труда сможете создать и графическую панель инструментов.

Начнем с конца

Что у нас должно получиться? На рисунке показана панель инструментов, которая получилась у меня:

Что получилось у меня

Похожа она на ту, что приведена выше? Мне кажется, что похожа, однако необходимо поработать немного над цветами, и тогда все будет идентично. Но работу над цветами оставляю уж Вам, тем более – это не самое сложенное в процессе создания.

Что творится в теге <BODY>?

Немного HTML-кода в статье не помешает. В общем вот он взгляд на меню со стороны HTML:

<div class=toolbar>

<span id=b1 class=button onMouseOver="button_over('b1')" onMouseOut="button_out('b1')" onMouseDown="button_down('b1')" onMouseUp="button_over('b1')">New</span>

<span id=b2 class=button onMouseOver="button_over('b2')" onMouseOut="button_out('b2')" onMouseDown="button_down('b2')" onMouseUp="button_over('b2')">Open</span>

<span id=b3 class=button onMouseOver="button_over('b3')" onMouseOut="button_out('b3')" onMouseDown="button_down('b3')" onMouseUp="button_over('b3')">Save</span>

</div>

Все кнопки панели инструментов помещены в тег <div>. Каждая кнопка представляет собой тег <span> с индивидуальным именем, заданным атрибутом id. Заметьте, что для каждой кнопки также определены следующие события: onMouseOver, onMouseOut, onMouseDown, onMouseUp.

А в это время в теге <STYLE>...

Если поработать со стилевыми таблицами, то можно достичь неплохих результатов и сымитировать вид какого угодно элемента управления, ну может только за исключением полосы прокрутки (тут надо еще и картиночки со стрелками добавить).

Стиль элементов выглядит так:

.button
{
border-top:1px solid #E6E4DF;
border-left:1px solid #E6E4DF;
border-bottom:1px solid #E6E4DF;
border-right:1px solid #E6E4DF;
padding-top:3px;
padding-bottom:3px;
padding-left:15px;
padding-right:15px;
text-align:center;
background-color:#E6E4DF;
width:10px;
}

.toolbar
{
background-color:#f6f4eF;
font-family:verdana;
font-size:11px;
padding:3px;
cursor:default;
}

Много строк, а толку мало... Как Вы видели в предыдущем разделе статьи каждой, кнопке помимо имени присвоен класс. Этот класс одинаков для всех кнопок и используется для задания общего стиля для кнопок. Кроме стилей кнопок есть стиль для самой панели инструментов.

Первоначально рамка кнопки сливается с ее фоном. Если первоначально не задать в стиле рамку, то появиться такой совсем нехороший эффект, как изменение размеров кнопки, что повлечет и изменение размеров всей панели, что как-то не очень красиво. Цвет фона картинки специально отличается от цвета фона самой панели инструментов – пользователю наверняка будет удобно видеть, куда надо мышку направлять. Центрируем текст и задаем ширину для кнопки – 10 пикселей.

Вы в праве спросить: «А зачем, скажите на милость задавать ширину кнопки, она ведь автоматически поменяется?» Ответ прост: «Для того мы задаем эту саму ширину, чтобы можно было вывести рамку кнопки на экран. Иначе, Internet Explorer откажется ее показывать.»

Для всей панели инструментов задается шрифт – Verdana, размер его – 11 пикселей, отступ в нутрии панельки – 3 пикселя и курсор – default – по умолчанию – стрелочка.

Для справки: для свойства курсор можно задавать следующие значения:

Значение Описание
auto Какой захочет браузер, такой курсор и будет.
crosshair Обычный крест.
default Основной курсор – тот который обычно отображается при работе за компьютером. Чаще всего – стрелочка.
hand Рука, как над гиперссылкой.
move Крест со стрелками во все четыре стороны.
*-resize Курсор как при изменении размеров окна (* = (n, ne, nw, s, se, sw, e, or w) – для каждого свое направление).
text Курсор, определенный в настройках пользователя для текстовых полей.
wait Подождите... Обычно – песочные часы.
help Стрелочка со значком вопроса.

И, наконец, появились они...

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

function button_over(elem)
{
document.all[elem].style.borderTop="1px solid #ffffff";
document.all[elem].style.borderLeft="1px solid #ffffff";
document.all[elem].style.borderBottom="1px solid #000000";
document.all[elem].style.borderRight="1px solid #000000";
}

function button_out(elem)
{
document.all[elem].style.borderTop="1px solid #E6E4DF";
document.all[elem].style.borderLeft="1px solid #E6E4DF";
document.all[elem].style.borderBottom="1px solid #E6E4DF";
document.all[elem].style.borderRight="1px solid #E6E4DF";
}

function button_down(elem)
{
document.all[elem].style.borderTop="1px solid #000000";
document.all[elem].style.borderLeft="1px solid #000000";
document.all[elem].style.borderBottom="1px solid #ffffff";
document.all[elem].style.borderRight="1px solid #ffffff";
}
Разберу только одну функцию, так как они практически идентичны. Функция button_over() изменяет стили рамки вокруг элемента, идентификатор которого задается параметром elem.

Вот и все, уважаемые. Кстати, тем кто заинтересовался данной темой имитации различных элементов могу посоветовать следующие мои статьи:
http://www.frnet.narod.ru/article/0008.html - Имитация ссылок.
http://www.frnet.narod.ru/article/0013.html - Создание меню при помощи JavaScript.

P.S. Пример использования скрипта здесь: http://www.frnet.narod.ru/script.html.

 
  » Друзья сайта
- - - - - - - - - - - - - - - -
  » Разное
- - - - - - - - - - - - - - - -
  » Счетчики
- - - - - - - - - - - - - - - -
  Дизайнер и ведущий проекта: Голубев Алексей
Copyright Alexei Golubev © 2004
Hosted by uCoz