2. Dojo toggle button
Dojo toggel button Decalarative
|
<html> <head> <title>Tutorial: A Button</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"></script>
</head> <body class="claro"> <button id="toggle" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass: 'dijitCheckBoxIcon', checked: true"> Toggle </button>
<script type="text/javascript"> require(["dojo/parser", "dojo/ready", "dijit/form/ToggleButton"], function(parser, ready){ ready(function(){ parser.parse(); }); }); </script> </body> </body> </html> |
Table 4 Dojo toggel button Declarative Code
Dojo toggel button programmtic
|
<html> <head> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> <script src='dojo-release-1.9.1/dojo/dojo.js'></script> </head>
<body class="claro"> <button id="toggle"></button> <script> require(["dijit/form/ToggleButton"], function(ToggleButton) {
var toggleButton = new ToggleButton({ iconClass: "dijitCheckBoxIcon", label: "Toggle", checked: true }, "toggle"); toggleButton.startup(); }); </script> </body> </html> |
Table 5 Dojo toggle button programmtic Code
코드 설명
iconClass에서 dijitCheckBox를 load하였고 label을 toggle로 설정하여 icon과 label이 동시에 보여지고 있다. 그리고 checked 는 true로 설정하여 체크 표시가 처음부터 보여지게 하였다. 체크 표시말고 다른 옵션을 줘서 다른 모양 표시도 가능하다.
결과 화면
Figure 2 Table 4,5의 결과 화면