Dojo Combo Box Code declarative
|
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: More Dijit Buttons</title> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> </head> <body class="claro">
<div id="combo" data-dojo-type="dijit/form/ComboButton" data-dojo-props=" optionsTitle:'Save Options', iconClass:'dijitIconFile', onClick:function(){ console.log('Clicked ComboButton'); }"> <span>Combo</span> <div id="saveMenu" data-dojo-type="dijit/Menu"> <div data-dojo-type="dijit/MenuItem" data-dojo-props=" iconClass:'dijitEditorIcon dijitEditorIconSave', onClick:function(){ console.log('Save'); }"> Save </div> <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){ console.log('Save As'); }"> Save As </div> </div> </div>
<!-- load dojo and provide config via data attribute --> <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script> <script> // load requirements for declarative widgets in page content require(["dojo/parser", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem"]); </script> </body> </html> |
Table 6 Dojo Combo Box declarative Code
Dojo Combo Box Code Programmtic
|
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: More Dijit Buttons</title> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> </head> <body class="claro"> <button id="combo"></button> <!-- load dojo and provide config via data attribute --> <script src="dojo-release-1.9.1/dojo/dojo.js"></script> <script>
require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(ToggleButton, ComboButton, Menu, MenuItem, DropDownButton, TooltipDialog) {
var menu = new Menu({ id: "saveMenu" }); var menuItem1 = new MenuItem({ label: "Save", iconClass: "dijitEditorIcon dijitEditorIconSave", onClick: function() { console.log("Save"); } }); var menuItem2 = new MenuItem({ label: "Save As", onClick: function() { console.log("Save As"); } }); menu.addChild(menuItem1); menu.addChild(menuItem2); var comboButton = new ComboButton({ optionsTitle: "Save Options", iconClass: "dijitIconFile", label: "Combo", dropDown: menu, onClick:function(){ console.log("Clicked ComboButton"); } }, "combo"); comboButton.startup(); menu.startup(); // this also starts up its child MenuItems
});
</script> </body> </html> |
Table 7 Dojo Combo Box Programmtic Code
Code 설명
Combo box를 클릭했을 때에 나오는 메뉴의 방향을 설정할 수 있다. 방향 설정 옵션을 추가 할 수 있는데 코드는 dropDownPosition:['after'] 형식으로 추가하면 된다. after는 오른쪽 방향이고 다른 방향으로는 before는 왼쪽 방향 above는 위쪽방향이며 default는 below이다. Table8, 9는 메뉴 방향 옵션에 대한 예시 코드이다.
|
<div id="combo" data-dojo-type="dijit/form/ComboButton" data-dojo-props=" dropDownPosition:['after'], optionsTitle:'Save Options', iconClass:'dijitIconFile', onClick:function(){ console.log('Clicked ComboButton'); }"> |
Table 8 declarative code
|
var comboButton = new ComboButton({ optionsTitle: "Save Options", iconClass: "dijitIconFile", label: "Combo", dropDown: menu, dropDownPosition:['before'], onClick:function(){ console.log("Clicked ComboButton"); } }, "combo"); |
Table 9 programmtic code
결과 화면
Figure 3 Table 6, 7의 결과 화면
'Dojo > Button, ComboBox,DropBox etc' 카테고리의 다른 글
| Dojo widget reference site (0) | 2013.08.08 |
|---|---|
| 4. Dojo Drop box (0) | 2013.08.08 |
| 2. Dojo toggle button (0) | 2013.08.08 |
| 1. Dojo Button (0) | 2013.08.08 |