Сайт: 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>
<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;
}
{
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.
{
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";
}
Вот и все, уважаемые. Кстати, тем кто заинтересовался данной темой имитации различных элементов могу посоветовать следующие мои статьи:
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.
