dijit/MenuBar
簡介
在應用系統中，建立一組結構化的選單系統，讓使用者可以迅速找到所要使用的功能，似乎是一件無法避免的工作。dojo 針對這個需求，也提供了各式的選單元件來應付。dijit/menuBar 可以應付複雜但結構化的選項，一般被用來作為應用系統的主選單。
範例
範例是一個橫式結構化的主選單，選項不多，但足以展示一般主選單所需要的結構了。整個主選單共有三層，以宣告法的方式建立，比較容易看出主選單的結構。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
width:1000px;
height:100%;
margin: 0 auto;
padding:20px;
}
</style>
範例中採用 claro 預設的樣式，所以沒有特別需要設定的樣式。
HTML
<body class="claro"></body>System 1System 1-1System 1-2System 1-3System 1-4System 2System 2-1System 2-2System 2-2-1System 2-2-2System 2-2-3System 3
在 HTML 中，最需要注意的是各種不同 Menu 及 MenuItem 所在的位置；還有哪些地方要呼叫動作 (action) 函式以採取必要的動作。
首先要建立一個 dijit/MenuBar 做為容器以容納第一層的選項。如果沒有第二層選項的項目，需使用 dijit/MenuBarItem （第 27 行）。如果該項目有第二層的選項，則必須使用 dijit/PopupMenuBarItem 元件（第 4 行和第 14 行）。元件中再建立 dijit/DropDwonMenu 元件做為容器來容納第二層的項目。
第 10 行的 dijit/MenuSeparator 元件是選頁分隔線，用來在某一層選項中，做項目的分類。
在第二層的項目中，如果沒有第三層選項，需使用 dijit/MenuItem 元件，若有第三層選項，則需使用 dijit/PopupMenuItem 元件（第 17 行）。
第三層選項則使用 dijit/Menu 做為容器（第 19 行），內中包含 dijit/MenuItem 做為選擇項目。
Script
在範例中，所有的動作都用 alert() 函式來顯示哪一個選項被選擇了，所以只有呼叫 parser.parse() 這個剖析器函式外，也沒有其它的程式碼。在實際的應用系統中，則將 alert() 函式，置換成要呼叫的函式。
沒有留言:
張貼留言