Первые элементы управления и темы
4.3.2. Варианты кнопок
Теги <button> и <toolbarbutton> могут отображать кнопки, размещая свое содержимое тремя разными способами. То, какое из них будет использоваться, зависит от атрибута type. Этот атрибут может отсутствовать (по умолчанию) или принимать одно из следующих значений:
menu menu-button radio checkbox
Примеры присваивания этих значений показаны на рисунке 4.8.
Первые два значения, menu и menu-button меняют внешний вид кнопки так, что она поддерживает такое содержимое, как меню. Оно состоит из единственного тега <menupopup> и его потомков. Меню описываются в "Формы и меню" , "Формы и меню". Маленькие треугольнички на рисунке изображаются тегами <dropmarker>, они представляют собой лишь тег <image> с особыми стилями. Вспомним, что тег <button> заключает свое содержимое в <hbox>. Если это кнопка типа menu, тогда тег <dropmarker> оказывается внутри такого <hbox> и становится частью кнопки, на которую можно нажать. Если это кнопка типа menu-button, <dropmarker> оказывается вне <hbox>. В этом случае кнопка и <dropmarker> нажимаются по отдельности. Так или иначе, нажав на <dropmarker>, вы откроете содержащееся в кнопке меню, <menupopup>. Отдельный стиль гарантирует, что кнопка и треугольник для раскрытия меню остаются выровненными по горизонтали, даже когда последний находится вне <hbox> кнопки. Вне контекста выпадающего меню <dropmarker> никак не отображается.
Два других типа кнопок, radio и checkbox, меняют отклик кнопки на нажатие. При их использовании кнопка копирует поведение тегов <radio> и <checkbox>, также описанных в "Формы и меню" , "Формы и меню".
В случае переключателя ( radio ) нажатие на кнопку приведет к тому, что она сменит стиль и будет выглядеть нажатой. Все дальнейшие нажатия ничего не изменят. Если у кнопки есть атрибут group, нажатие на нее повлияет и на все остальные кнопки с таким же значением атрибута group. При нажатии на какую-либо кнопку из этой группы, все остальные будут выглядеть ненажатыми. Если потом нажать на какую-нибудь другую кнопку из этой группы, первая вернется в обычное состояние.
В случае флажка ( <checkbox> ) каждое нажатие на кнопку меняет ее состояние с нажатого на обычное или наоборот. Эти нажатия никак не влияют на другие кнопки.
К тегу <button> и разным его вариантам можно обращаться из JavaScript, как и к любому XML-тегу. У всех этих вариаций есть свойства объекта type, group, open и checked, доступные из JavaScript. Эти свойства соответствуют атрибутам <button> с тем же именем. Свойство open указывает, открыто ли сейчас меню <menupopup>.
4.3.3. Grippys
Grippys - маленькие, второстепенные элементы управления, появляющиеся на других или рядом с другими, более крупными и важными элементами управления. Их цель - дать пользователю возможность контроля над внешним видом основного элемента управления, например, как при изменении внешнего вида циферблата часов при прокручивании ручки справа. Самые известные примеры grippys - углы и края окон, хотя сами по себе grippys не так очевидны. Когда указатель мыши оказывается поверх этих grippys на краях и в углах окон, его значок меняется, и grippy можно перетаскивать, удерживая кнопку мыши нажатой, и менять размеры окна.
Хотя grippys часто внешне похожи на кнопки, возможность перемещать или менять вид других графических элементов отличает их от обычных кнопок. Ползунок полосы прокрутки чем-то похож на grippy за исключением того, что он меняется сам, а не меняет полосу прокрутки. XUL-тег <dropmarker> тоже чем-то похож на grippy, хотя он тоже никак не меняет тег, к которому относится.
В Mozilla и XUL есть несколько разных типов grippys. Вот их полный список: <grippy>, <toolbargrippy>, <resizer> и <gripper>.
4.3.3.1. Тег <grippy>
Чтобы увидеть grippy в действии, откройте Боковую панель Mozilla, выбрав в окне Навигатора View | Show/Hide.. | Sidebar. Здесь <grippy> - небольшая вертикальная полоска на узкой границе с правой стороны Боковой панели.
Тег <grippy> используется внутри тега <splitter> - тонкого разделителя, который похож на видимый разделитель между двумя элементами содержимого с изменяемыми размерами. При перетаскивании <splitter> содержимое с одной его стороны сжимается, а с другой - расширяется. <splitter> дает пользователю возможность определять, какую часть окна может занимать какое-либо содержимое. Этот тег обсуждается в "Навигация" , "Навигация".
Тег <grippy> очень прост. У него нет никаких особых атрибутов или содержимого. Его внешний вид полностью определяется стилями. Он помещается в центре тега <splitter>, чтобы напомнить пользователю, что тут есть что перетаскивать. Любая часть <splitter>, а не только <grippy>, может использоваться как точка, за которую можно перетаскивать разделитель. Использование тега <grippy> действительно тривиально:
<splitter><grippy/><splitter>
Единственное особое предназначение <grippy> - использование собственных обработчиков событий. Таким образом щелчки мышью могут собираться для <splitter>, который обычно "распознает" только перетаскивание. Такие одиночные щелчки могут скрывать разделитель, перемещать его на какое-то заранее определенное место, например, до упора влево или в середину, или клонировать его так, чтобы появлялись дополнительные разделители.
В реализации тега <grippy> почти нет каких-либо особенностей. Единственная его необычная функция: для тега <splitter> <grippy> представляется как содержимое, поэтому иногда разделитель меняет атрибуты размещения своего grippy, если меняется сам. <grippy> - не определенный пользователем тег, так как его имя известно и используется в реализации платформы.
4.3.3.2. Тег <toolbargrippy>
Тег <toolbargrippy> применяется для сворачивания панели инструментов в маленькую пиктограмму так, чтобы она занимала меньше места. Для этого панель инструментов должна быть создана с помощью XUL-тега <toolbar>, заключенного в <toolbox>. У такой панели инструментов слева будет маленькая кнопка - <toolbargrippy>. На рисунке 4.9 показаны примеры использования таких grippys.
Тег <toolbargrippy> - предмет жарких споров. В Mozilla 1.0.2 он существует, а в версии 1.2.1 был убран. В версии 1.3 его вернули, и он до сих пор используется. Аргументы за <toolbargrippy> примерно такие: он уже знаком пользователям Netscape; это уникальное нововведение; его сложно эмулировать в Internet Explorer. А вот аргументы против: он необычен и путает пользователей; он не позволяет фиксировать панели инструментов; он происходит от конкретной графической среды (OpenLook от Sun) и должен использоваться только там.
Следующие замечания относятся только к тем версиям Mozilla, которые поддерживают <toolbargrippy>.
Как и в случае <grippy>, сам по себе <toolbargrippy> не особенно полезен. Он представляет собой тег <image> с небольшими дополнениями. <toolbargrippy> создается автоматически тегом <toolbar> и никогда не указывается автором XUL-документа вручную. Значки на элементе grippy не происходят от какого-либо элемента управления из собственной графической среды ОС, это просто изображения, которые получились похожими на элементы управления графической среды OpenLook.
У <toolbargrippy> нет особых атрибутов или собственного содержимого, но у тега <toolbar>, в котором он находится, есть один особый атрибут. <grippytooltiptext> предоставляет текст всплывающей подсказки для grippy, если панель инструментов свернута. Эта подсказка позволяет идентифицировать, какая панель скрывается за горизонтальным grippy.
Поведение <toolbargrippy> полностью реализовано с помощью JavaScript и XBL-определения <toolbar>. При щелчке на grippy он сам и панель инструментов скрываются. Вместо этого появляется новый, горизонтальный grippy с другими стилями, его содержимое создается автоматически, затем этот grippy добавляется в XUL-документ. Все это делается с помощью скриптов, которые позволяют создавать новое содержимое с помощью интерфейсов DOM 1, описываемых в "Навигация" . Когда появляется горизонтальный grippy, он представляет собой новое содержимое. Если щелкнуть по этому новому grippy, запускается обратный процесс. Горизонтальный grippy хранится внутри особого блока <hbox> тега <toolbox>. Этот <hbox> пуст и невидим, пока к нему не добавляются горизонтальные grippys.