DIV CSS 佈局教程網

添加多個按鈕到一個窗口

　　到目前為止我們創建的這個窗口裡面什麼也沒有,因此還不算非常有趣. 在這一節中,我們將添加兩個按鈕, 一個“查找”按鈕和一個“取消”按鈕.我們還將學到一個簡單的方法在窗口上來定位它們.

　　像Html, XUL也有許多標記，它們被用來當作創建用戶接口的元素. 最基本的一個 button 標記. 這個元素被用來創建簡單的按鈕。

　　按鈕元素有兩個主要的屬性，一個label和一個image。你可以要一個或兩個都要。因此，按鈕可以只有一個標簽，一個圖片或標簽和圖片都有。通常在對話框中會使用“確定”和“取消”按鈕。

　　按鈕的語法

　　button 標簽有下面的語法要求：

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

　　可用的屬性如下，有一些是可選的:

　　id　你用來標識按鈕的唯一標識。你會在所有的元素中看到此屬性。你可以在樣式表(style)或腳本(script)中通過它來引用按鈕。因此，你幾乎可以在所有的元素中添加這個屬性。在這個教程中它不是一直都出現在元素中（It isn't always placed on elements in this tutorial for simplicity）。 class　按鈕的樣式表。在這裡的用法和在Html中是一樣的。它是使用在顯示按鈕裡面的樣式。在這節中的dialog值就使用了。多數情況下，你不用在按鈕上使用此屬性。 label　標簽會顯示在按鈕上。例如，“確定”或者“取消”。如果沒人設置這個參數，在按鈕上就不會顯示文字。 image　在按鈕上顯示指定路徑的圖片。如果沒有給出此屬性，則不會顯示圖片。你通常可以使用如下的樣式表屬性list-style-image來指定要顯示的圖片。 disabled　如果這個屬性被設置為true，按鈕就會被禁用。這樣通常按鈕上的文字將會顯示為灰色（grey）。如果按鈕被禁用，按鈕上的功能就不可以被執行。如果這個屬性沒有設置，按鈕就是啟用的。你可以用JavaScript來對按鈕的可用狀態進行控制。 Accesskey　這個屬性讓你可以設置一個字母它的功能就像是一個快捷鍵。這個字母會被劃上下劃線並顯示在標簽裡。當用戶按ALT鍵(或者在每個平台中一個功能類似的鍵)的同時按下這裡設置的鍵時，不論按鈕在窗口的任何地方都能取得到焦點。

　　注釋：按鈕支持比上面列出的更多的屬性。其他的屬性可以參考 discussed later.

　　更多的按鈕例子

　　Example 1 : Source VIEw

<button label="Normal"/>
<button label="Disabled" disabled="true"/>

　　上面的這些例子是在圖片裡面生成按鈕。第一個按鈕是一個標准的按鈕。第二個按鈕是禁用的，所以它整個顯示為灰色。

　　我們將從為查找文件工具創建一個簡單的查找按鈕開始。下面這個例子的源碼顯示怎麼去做這件事。

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

　　注釋：Firefox不允許你從網頁上打開Chrome，因此查看教程中的鏈接時會顯示在一個標准的浏覽器窗口中。至此，按鈕會顯示在窗口中間並自動伸展。你可以增加align="start"到window標簽阻止其自動伸展。

　　例子 findfile.xul

　　請添加我們在前面章節創建的這些代碼到findfile.xul文件。這些代碼必須插入到 window 標簽裡面。代碼是下面紅色顯示的部份:

<?XML version="1.0"?>
<?XML-stylesheet href="Chrome://global/skin/" type="text/CSS"?>
<window
　　id="findfile-window"
　　title="文件查找"
　　orIEnt="horizontal"
　　 XMLns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
　<button id="find-button" label="查找"/>
　<button id="cancel-button" label="取消"/>
</window>

　　你也可以注釋掉“取消”按鈕。窗口提供水平對齊地顯示兩個按鈕。如果你在Mozilla中打開這個文件，你就可以獲得和這裡顯示的圖片一樣的效果。

　　注解：我們不能直接在XUL文件中寫文本標簽。我們可以使用 實體替換這樣文本可以很容易地進行翻譯.