dijit/Menu
簡介
dijit/Menu 配合 dijit/MenuItem 可以很快的建立一個簡單的選單。依據需求，選單可以常駐在畫面上；或當游標移到某一元件上方，按下滑鼠右鍵時才出現。這種在特定元件上按下右鍵才出現的選單，統稱為「內文選單」(context menu)，因為選單的選項常常會依元件的性質或元件的內文而改變。
範例
範例中用程式法在畫面上建立一個顏色方塊，當游標移到方塊內並按下右鍵時，會出現一個有三個功能的內文選單。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
width:1000px;
height:100%;
margin: 0 auto;
padding: 20px;
}
.box {
width:100px;
height:100px;
border: 2px solid gray;
background-color:#90EE90;
}
</style>
在 CSS 中，用 .box 設定方塊的樣式。
HTML
<body class="claro">
</body>
HTML 中的元件，此時並非 dijit/Menu 元件的掛載點，而是 dijit/Menu 指定要關聯的元件。dijit/Menu 可同時關聯多個元件，當游標在任何關聯的元件上按下右鍵，都會出現相同的內文選單。唯此時須用 event 物件去判斷觸發事件的元件，以決定針對哪個元件進行處理。
Script
第 20~21 行建立一個 dijit/Menu 元件做為容器，以容納選單中的選項，其中的 targetNodeIds 屬性值是一個陣列，陣列中包含該選單所有要關聯的對象，在範例中只有一個要關聯的對象，所以陣列中只有一個元素。
第 26~44 行則依序在容器中加入二個選項，一條分隔線，再加入一個選項，就大功告成了。
沒有留言:
張貼留言