操作欄

---

黑莓10操作欄允許按鈕和標籤的組合。操作欄目前僅支援playbook和BB10裝置。它本質上是一個工具欄，出現在滾動頁面上層的螢幕底部。操作欄還允許您使用一個可選的後退按鈕回退到前面的螢幕上。
【注意】不允許將後退按鈕和標籤操作欄結合。

如果你提供一個data-bb-back-caption屬性操作欄，後退按鈕將自動建立。在酒吧被定義為每一項data-bb-type="action"和它的型別是定義的data-bb-style屬性可以是一個“標籤”或“按鈕”。標籤自動顯示選中的選項卡為高亮狀態。建議您對標籤和按鈕分組以提供一個乾淨的使用者介面。

設定一個標籤的選中狀態你可以設定它的初始狀態data-bb-selected="true"屬性。

 <div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-img="cog.png">Library</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-selected="true" data-bb-img="cog.png">Smart</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="cog.png">Find</div>
</div>

最初的可見性

最初可見狀態（按鈕或選項卡）可以設定使用data-bb-visible="false"屬性來隱藏。選項卡預設是可見的，除非設定data-bb-visible屬性來隱藏在溢位選單。

<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-visible="false" data-bb-img="cog.png">Library</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-img="cog.png">Music</div>
</div>

onclick

你可以給你的按鈕或者標籤分配一個 onclick 事件處理程式。

<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-img="cog.png" onclick="alert('Library')">Library</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="cog.png" onclick="alert('Find')">Find</div>
</div>

影像大小

影像用於動作按鈕或者標籤按鈕。

• 黑莓PlayBook - 40×40畫素
• 黑莓10 - 80×80畫素

Q10操作欄

當使用Q10的操作欄，你會發現“按鈕/標籤”圖示沒有出現標題文字。通過這個設計以提供更多可用的螢幕空間。如果使用者在操作欄按住或者長按，圖示上面就會出現標題文字了。

動作按鈕溢位選單

如果你希望你的動作按鈕或者標籤按鈕出現在標籤頁溢位選單或動作溢位選單，通過使用data-bb-overflow="true"屬性，通過給按鈕或標籤新增該屬性，它將出現在相關的溢位選單。預設情況下從黑莓10.2會有“more”這個文字出現在動作溢位按鈕上。如果你想將這個幾個文字改成本地語言文字，你可以設定操作欄的data-bb-more-caption屬性，用同樣的方法你也可以設定後退按鈕標題文字。

在操作欄總共只可以有5個“可視”的行為（包括標籤按鈕和動作按鈕）。 保持在操作欄上只有“主要行動”,這是開發人員的責任，把其他操作放到溢位選單為了確保螢幕的主要功能是清晰的，並且讓使用者沒有二次操作。

固定動作溢位欄

在有些案例中，你有一個特定的動作，你在操作欄希望呼叫溢位選單是不同的或特殊的（“刪除”就是一個很好的例子）。做這個動作可以脫穎而出“固定”行動的底部溢位選單遠離你的其他操作。這可以通過提供的 data-bb-overflow="true"和data-bb-pin="true"屬性按鈕的操作。

<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="button" data-bb-img="cog.png">Do Something</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="cog.png">Smart</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="cog.png">Delete</div>
</div>

標籤頁溢位選單

當你將一個或多個標籤標記為一個溢位行動，選項卡將顯示在標籤溢位選單。這也將建立一個標籤頁溢位選單按鈕在最左邊的操作欄。這個標籤頁溢位選單按鈕使用了一個可用的5可見行動槽。

標籤頁溢位是針對螢幕的其他地方不一樣普遍的標籤你決定顯示在操作欄本身。當使用者按下選單按鈕標籤頁溢位時，選單的所有可用的選項卡將滑入顯示（這兩個標記為溢位和那些出現在操作欄）。當使用者選擇一個選項卡的溢位選單將火選項卡的onclick事件。

如果選定的選項卡的標籤標記為一個溢位的行動，標籤溢位選單按鈕將顯示的資訊行動。回到一個標籤，沒有標記為溢位將觸發標籤頁溢位選單按鈕回到它的初始狀態。

標籤頁溢位行為也有一個data-bb-accent-text屬性，可以用來新增免費文字選項卡上，將出現以下行動標題溢位。這允許你帶來進一步的上下文選項卡。

<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-img="cog.png" data-bb-accent-text="Bar">Foo</div>
</div>

操作欄佈局示例

可以看到一些示例操作欄的佈局如下：

操作欄JavaScript介面

以下JavaScript介面可用於動態操縱一個動作欄在螢幕新增到DOM中。

setBackCaption(值)

如果你的操作欄 回 按鈕可以設定按鈕的標題使用setBackCaption()。

document.getElementById('actionBarID').setBackCaption('Return');
setSelectedTab(值)

更改當前選中的選項卡通過JavaScript可以使用setSelectedTab()傳遞函式的選項卡選擇。

var tab = document.getElementById('myTab'),
actionBar = document.getElementById('myActionBar');

actionBar.setSelectedTab(tab);

顯示()和隱藏()

當你想要動態地顯示或隱藏操作欄，可以呼叫它的“顯示()”和“隱藏()”功能。

document.getElementById('myActionBar').show();
document.getElementById('myActionBar').hide();

操作按鈕/標籤JavaScript介面

以下JavaScript介面可用於動態操縱一個動作（選項卡/按鈕）在螢幕上被新增到DOM中。

getCaption()和setCaption(值)

你可以檢索和設定一個行動項的標題（標籤和按鈕），使用getCaption()和setCaption()功能。

var myAction = document.getElementById('myAction');
myAction.setCaption('hello world');
alert(myAction.getCaption());
getImage()和setImage(值)

可以檢索和設定一個行動專案使用的形象getImage()和setImage()功能。

var myAction = document.getElementById('myAction');
myAction.setImage('myimages/foo.png');
alert(myAction.getImage());

顯示()和隱藏()

你可以動態地改變能見度action，使用“顯示()”、“隱藏()”功能。這些適用於操作在主操作欄可見，在標籤和行動和行動溢位。

var myAction = document.getElementById('myAction');
myAction.show();
myAction.hide();