Dojo Button declarative
|
<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" data-dojo-config=" parseOnLoad: true"></script>
</head> <body class="claro"> <button id="btn2" data-dojo-type="dijit/form/Button" data-dojo-props=" iconClass: 'dijitIconNewTask', showLabel: false, onClick: function(){ console.log('Second button was clicked!'); }"> Click Me! </button> <script> // load requirements for declarative widgets in page content require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"]); </script> </body> </body> </html> |
Table 1 Dojo button declarative Code
Dojo 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"> <div> <button id="btn2"></button> </div> <script> require(["dijit/form/Button", "dojo/domReady!"], function(Button) { var button2 = new Button({ iconClass: "dijitIconNewTask", showLabel: false, label: "Click Me!", // analogous to title when showLabel is false onClick: function(){ console.log("Second button was clicked!"); } }, "btn2");
button2.startup(); }); </script> </body> </html> |
Table 2 Dojo button programmtic Code
<!--[if !supportLists]-->1.3 <!--[endif]-->Code 설명
iconclass를 사용하여 dojo의 기본 아이콘을 불러왔으며 dojo의 iconclass에 있는 icon list는 다음과 같다.
|
· dijitIconSave · dijitIconPrint · dijitIconCut · dijitIconCopy · dijitIconClear · dijitIconDelete <!--[if !supportLists]-->· dijitIconUndo <!--[if !supportLists]-->· dijitIconEdit <!--[if !supportLists]-->· dijitIconNewTask <!--[if !supportLists]-->· dijitIconEditTask <!--[if !supportLists]-->· dijitIconEditProperty <!--[if !supportLists]-->· dijitIconTask <!--[if !supportLists]-->· dijitIconFilter <!--[if !supportLists]-->· dijitIconConfigure <!--[if !supportLists]-->· dijitIconSearch <!--[if !supportLists]-->· dijitIconApplication <!--[if !supportLists]-->· dijitIconBookmark <!--[if !supportLists]-->· dijitIconChart <!--[if !supportLists]-->· dijitIconConnector <!--[if !supportLists]-->· dijitIconDatabase <!--[if !supportLists]-->· dijitIconDocuments <!--[if !supportLists]-->· dijitIconMail <!--[if !supportLists]-->· dijitLeaf <!--[if !supportLists]-->· <!--[endif]-->dijitIconFile <!--[if !supportLists]-->· <!--[endif]-->dijitIconFunction <!--[if !supportLists]-->· <!--[endif]-->dijitIconKey <!--[if !supportLists]-->· <!--[endif]-->dijitIconPackage <!--[if !supportLists]-->· <!--[endif]-->dijitIconSample <!--[if !supportLists]-->· <!--[endif]-->dijitIconTable <!--[if !supportLists]-->· <!--[endif]-->dijitIconUsers <!--[if !supportLists]-->· <!--[endif]-->dijitFolderClosed <!--[if !supportLists]-->· <!--[endif]-->dijitIconFolderClosed <!--[if !supportLists]-->· <!--[endif]-->dijitFolderOpened <!--[if !supportLists]-->· <!--[endif]-->dijitIconFolderOpen <!--[if !supportLists]-->· <!--[endif]-->dijitIconError
|
Table 3 Dojo Icon Class List
Icon만 보이게 하기 위해서 showLabel에서 false값을 주었으며, click했을 때에 click의 확인 유무를 위해 console.log를 출력한다.
결과 화면
Figure 1 Table 1,2의 결과 화면
'Dojo > Button, ComboBox,DropBox etc' 카테고리의 다른 글
| Dojo widget reference site (0) | 2013.08.08 |
|---|---|
| 4. Dojo Drop box (0) | 2013.08.08 |
| 3. Dojo Combo Box (0) | 2013.08.08 |
| 2. Dojo toggle button (0) | 2013.08.08 |