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

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

 

В этом разделе мы увидимa, как можно добавить к окну несколько простых кнопок.

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

В окне, которое мы создали в предыдущем разделе, ничего нет. Ну и зачем нам такое окно? В этом разделе, мы добавим де кнопки, "Find" и "Cancel". Кроме того, мы узнаем, как позиционировать кнопки в окне.

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

Тэг button имеет два основных свойства , label и image. Вам нужно определить хотя бы одно. То есть вы можете определить для кнопки имя, или картинку, или и то и другое (или ни того ни другого, всё равно заработает).

Синтаксис тэга button

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

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

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

id 
A unique identifier so that you can identify the button with. You'll see this attribute on all elements. You'll want to use this if you want to refer to the button in a style sheet or script. However, you should add this attribute to almost all elements. It isn't always placed on elements in this tutorial for simplicity.
class 
The style class of the button. This works the same as in HTML. It is used to indicate the style that the button appears in. In this case the value dialog is used. In most cases, you will not use a class for a button.
label 
The label that will appear on the button. For example, OK or Cancel. If this is left out, no text appears.
image 
The URL of the image to appear on the button. If this is attribute is left out, no image appears. You can also specify the image in a stylesheet using the list-style-image property.
disabled 
If this attribute is set to true, the button is disabled. This is usually drawn with the text in grey. If the button is disabled, the function of the button cannot be performed. If this attribute is left out entirely, the button is enabled. You can switch the disabled state of the button using JavaScript.
accesskey 
This should be set to a letter that is used as a shortcut key. This letter should appear in the label text and will typically be drawn underlined. When the user presses ALT (or a similar key that varies on each platform) and the access key, the button will be focused from anywhere in the window.

Note that a button supports more attributes than those listed above. Others will be discussed later.

Some examples of buttons

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

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

The examples above will generate the buttons in the image. The first button is a normal button. The second button is disabled so it appears greyed out.

We'll start by creating a simple Find button for the find files utility. The example code below shows how to do this.

<button id="find-button" label="Find"/>
Note that Firefox doesn't allow you to open chrome windows from web pages, so the View links in the tutorial will open in normal browser windows. Due to this, the buttons will appear to stretch across the window. You can add align="start" to the window tag to prevent the stretching.
The findfile.xul example

Let's add this code to the file findfile.xul that we created in the previous section. The code needs to be inserted in-between the window tags. The code to add is shown in red below:

<?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

You'll notice that the Cancel button was added also. The window has been given a horizontal orientation so that the two buttons appear beside each other. If you open the file in Mozilla, you should get something like the image shown here.

 

Note that we shouldn't put text labels directly in the XUL file. We should use entities instead so that text can be easily translated.

In the next section, we will find out how to add labels and images to a XUL window.

See also more button features

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

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