| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

Dojo ひな形

提供: MyMemoWiki
ナビゲーションに移動 検索に移動

Dojo ひな形

Dojo | JavaScript |

基本形

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
  6.     <title></title>
  7. </head>
  8. <body class="claro">
  9.      <!--メインコンテンツ-->
  10.  
  11.     <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
  12.     </script>
  13.     <script type="text/javascript">
  14.     // ここでコンポーネントのインポート
  15.     dojo.require("dijit.layout.BorderContainer");
  16.     // ロード時の処理
  17.     dojo.addOnLoad(function(){
  18.         
  19.         
  20.     });
  21.     </script>
  22. </body>
  23. </html>

レイアウト

BorderLayout

0393 dojo boarder layout.jpg 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
  6.     <style type="text/css">
  7.     html, body {
  8.         width: 100%;
  9.         height: 100%;
  10.         margin: 0;
  11.         overflow:hidden;
  12.     }
  13.     #borderContainer{
  14.         width:100%;
  15.         height:100%;
  16.     }
  17.     </style>
  18.     <title></title>
  19. </head>
  20. <body class="claro">
  21.  
  22.     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: true" id="borderContainer">
  23.         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">
  24.         header
  25.         </div>
  26.         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 200px;">
  27.         menu
  28.         </div>
  29.         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true">
  30.         contents
  31.         </div>
  32.         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: true">
  33.         fotter
  34.         </div>
  35.     </div>
  36.  
  37.     <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
  38.     </script>
  39.     <script type="text/javascript">
  40.     dojo.require("dijit.layout.BorderContainer");
  41.     dojo.require("dijit.layout.ContentPane");
  42.     dojo.addOnLoad(function(){
  43.         
  44.     });
  45.     </script>
  46. </body>
  47. </html>

Form

Button

0394 dojo buttons.jpg 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
  6.     <title></title>
  7. </head>
  8. <body class="claro">
  9.  
  10.     <button data-dojo-type="dijit.form.Button" type="button">Button
  11.         <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
  12.             alert("Button Clicked!");
  13.         </script>
  14.     </button>
  15.  
  16.     <div data-dojo-type="dijit.form.ComboButton">
  17.         <span>ComboButton</span>
  18.         <div data-dojo-type="dijit.DropDownMenu">
  19.             <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Item 1 clicked')}">Item 1</div>
  20.             <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Item 2 clicked')}">Item 2</div>
  21.         </div>
  22.     </div>
  23.  
  24.     <div data-dojo-type="dijit.form.DropDownButton">
  25.       <span>DropDown</span>
  26.       <div data-dojo-type="dijit.TooltipDialog">
  27.          <label for="name">Item 1:</label> <input data-dojo-type="dijit.form.TextBox" id="name" name="item1"><br>
  28.          <label for="hobby">Item 2:</label> <input data-dojo-type="dijit.form.TextBox" id="hobby" name="item2"><br>
  29.          <button data-dojo-type="dijit.form.Button" type="submit">OK</button>
  30.       </div>
  31.     </div>
  32.  
  33.     <button data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">
  34.         Toggle
  35.     </button>
  36.  
  37.     <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
  38.     </script>
  39.     <script type="text/javascript">
  40.  
  41.     // for all sample
  42.     dojo.require("dijit.form.Button");   
  43.     
  44.     // for combo sample
  45.     dojo.require("dijit.DropDownMenu"); 
  46.     dojo.require("dijit.MenuItem");        
  47.     
  48.     // for dropdown sample
  49.     dojo.require("dijit.Dialog");        
  50.     dojo.require("dijit.form.TextBox");    
  51.     dojo.require("dijit.TooltipDialog");
  52.     
  53.     dojo.addOnLoad(function(){
  54.         
  55.         
  56.     });
  57.     </script>
  58. </body>
  59. </html>
「https://www.typea.info/tips_/index.php?title=Dojo_ひな形&oldid=5950」から取得

© 2006 矢木浩人