колонтитул в word 2007, 0000002111

Создание панели инструментов средствами CSS и JavaScript

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

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

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

Все кнопки панели инструментов помещены в тег <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. Для обеспечения поведения элементов похожего на поведение кнопок панели инструментов используются три функции. Все они работают по одному принципу. В общем вот код всех трех:

Разберу только одну функцию, так как они практически идентичны. Функция button_over() изменяет стили рамки вокруг элемента, идентификатор которого задается параметром elem.

колонтитулы в word 2007, 000000211111

Класс!

В Мой Мир

Загрузка...

Создание панели инструментов средствами CSS и JavaScript

Последние новости

Самое популярное