MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Добавляем кнопки

 

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

Добавление кнопок к окну

В окне, которое мы создали, не было ничего и оно было неинтересным. В этой статье мы добавим 2 кнопки: кнопку поиска и кнопку отмены. Мы также изучим простой способ позиционирования их в окне.

Подобно HTML, XUL имеет определённое количество тегов, которые могут быть использованы для создания элементов пользовательского интерфейса. Самый базовый из них - тег button. Этот элемент используется для создания простых кнопок.

Кнопка имеет ассоциированные с ней свойства: label и image. Вам нужна одна или обе из них. Таким образом, кнопка может иметь только label, только image, или label и image одновременно. Кнопки используются например в качестве Ок и Отмена в диалогах.

Синтаксис кнопок

Тег button имеет следующий синтаксис:

<button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/>

Атрибуты описаны ниже, все они не являются обязательными:

id 
Уникальный идентификатор, с помощью которого можно идентифицировать кнопки. Вы будете видеть этот атрибут на всех кнопках. Вы будете использовать его, когда Вам нужно будет ссылаться на кнопку в таблице стилей, или в скрипте. Вам следует добавлять этот атрибут к большинству элементов. Для простоты, идентификаторы в этом документе прописаны не везде.
class 
Класс стиля кнопки. Это работает так же, как и в HTML. Атрибут используется для указания стиля, в соответствии с которым будет выглядеть кнопка. В данном случает используется значение dialog. В большинстве случаев вы не будете использовать для кнопки этот атрибут.
label 
Текстовая метка, которая будет выведена на кнопке. Например, OK или Отмена. Если не указывать этот атрибут, на кнопке текста не будет.
image 
URL изображения, которое появится на кнопке. Если не указать данный атрибут, на кнопке не будет изображения. Вы также можете задать изображение в листе стилей (stylesheet) используя значение list-style-image.
disabled 
Если данный атрибут установлен в true, кнопка отключена. Как правило это обозначается серым цветом надписи на ней. Если кнопка отключена, то функции, вызываемые ею, не могут быть выполнены. Если данный атрибут отсутствует вообще, кнопка включена. Менять состояние кнопки на отключенное вы можете с помощью JavaScript.
accesskey 
Этот атрибут устанавливает букву, которая может использоваться для быстрого вызова функции кнопки. Эта буква должна быть в строке текстовой метки и, как правило, отображается подчеркнутой. Когда пользователь нажимает ALT (или клавишу с такой же функцией, которая может называться иначе на другой платформе) и данную букву доступа (accesskey), кнопка получает фокус ввода из любого положения в окне.

Заметьте, что кнопки поддерживают больше атрибутов, чем те, которые перечислены выше. Другие атрибуты будут описаны позже.

Несколько примеров кнопок

var el = env.locale; Example 1 : Исходный код View

Image:buttons1.png
<button label="Normal"/>
<button label="Disabled" disabled="true"/>

Примеры выше будут генерировать кнопки, показанные на рисунке. Первая кнопка - это обычная кнопка. Вторая кнопка отключена, поэтому текст на ней выводится серого цвета.

Начнем с создания простой кнопки поиска для утилиты поиска файлов. Пример кода ниже показывает, как это можно сделать.

<button id="find-button" label="Find"/>
Заметьте, что Firefox не позволяет вам открывать chrome окна с веб-страниц, поэтому ссылки Просмотра в руководстве откроются в обычном окнах браузера. Из-за этого кнопки появятся растянутыми на всю ширину окна. Вы можете добавить align="start" в тег окна, чтобы предотвратить такое растягивание.
Пример findfile.xul

Давайте добавим этот код в файл findfile.xul, который мы создали в предыдущей главе. Код необходимо вставить между тегами window. В листинге ниже добавляемый код выделен красным цветом:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="findfile-window"
        title="Find Files"
        orient="horizontal"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Find"/>
<button id="cancel-button" label="Cancel"/>

</window>
Image:buttons2.png

Вы увидите, что также добавилась кнопка "Cancel". Окно имеет горизонтальное расположение, поэтому кнопки выводятся рядом друг с другом. Если вы откроете этот файл в Mozilla, вы увидите что-то подобное тому, что приведено на рисунке выше.

 

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

В следующей главе мы узнаем как добавлять метки и изображения в окно XUL.

См.также дополнительные возможности кнопок

Метки документа и участники

 Внесли вклад в эту страницу: RedFox, Alger
 Обновлялась последний раз: RedFox,