Drop 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"> <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> </head> <body class="claro"> <div id="dropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass: 'dijitIconApplication'"> <span>DropDown</span> <div data-dojo-type="dijit/TooltipDialog"> This is a TooltipDialog. You could even put a form in here! </div> </div> <script> // load requirements for declarative widgets in page content require(["dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]); </script> <body> </html> |
Table 10 Drop box Code Declarative
Drop box Code programmatic
|
<!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"> <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config=" parseOnLoad: true"></script> <body class="claro"> <button id="dropDown"></button> <script> require([ "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(DropDownButton, TooltipDialog) { var tooltip = new TooltipDialog({ content: "This is a TooltipDialog. You could even put a form in here!" }); var dropDownButton = new DropDownButton({ iconClass: "dijitIconApplication", label: "DropDown", dropDown: tooltip }, "dropDown"); dropDownButton.startup(); tooltip.startup(); }); </script> </body> </html> |
Table 11 Drop down Programmatic Code
코드 설명
Drop down은 버튼을 클릭했을 때에 다른 widget을 불러오는 것이 가능하다. Table 10,11 은 tooltip을 불러왔고, Calendar나 ColorPalette 등을 불러올 수 있다. 그리고 불러오는 위젯에 대해서 제한 조건을 줄 수 있다. Table 12,13은 ColorPalette에 대한 예제이다.
|
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"> <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> </head> <body class="claro">
<button id="dropdown_default" value="color" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"noteIcon"'> <span>Default (below)</span> <span data-dojo-type="dijit/ColorPalette" data-dojo-props='palette:"3x4", onChange:function(val){ console.log(val); }'></span> </button>
<script> // load requirements for declarative widgets in page content require(["dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]); </script> <body> </html> |
Table 12 Drop down ColorPalette declarative Code
|
<!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"> <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> <body class="claro"> <button id="dropDown"></button> <script> require([ "dijit/ColorPalette", "dijit/form/DropDownButton", "dojo/domReady!"], function(ColorPalette, DropDownButton) { var palette = new ColorPalette({ palette:"3x4" }); var dropDownButton = new DropDownButton({ iconClass: "dijitIconApplication", label: "DropDown", dropDown: palette }, "dropDown"); dropDownButton.startup(); paletee.startup(); }); </script> </body> </body> </html> |
Table 13 Drop down ColorPaltte Programmtic Code
결과 화면
Figure 4 Table 10,11 결과 화면
'Dojo > Button, ComboBox,DropBox etc' 카테고리의 다른 글
| Dojo widget reference site (0) | 2013.08.08 |
|---|---|
| 3. Dojo Combo Box (0) | 2013.08.08 |
| 2. Dojo toggle button (0) | 2013.08.08 |
| 1. Dojo Button (0) | 2013.08.08 |