Dojo ひな形の変更点

追加された行はこのように表示されます。
削除された行は~~このように~~表示されます。
!!!Dojo ひな形
[Dojo][JavaScript]

!!!基本形
 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
     <title></title>
 </head>
 <body class="claro">
      <!--メインコンテンツ-->
 
     <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
     </script>
     <script type="text/javascript">
     // ここでコンポーネントのインポート
     dojo.require("dijit.layout.BorderContainer");
     // ロード時の処理
     dojo.addOnLoad(function(){
         
         
     });
     </script>
 </body>
 </html>
!!!レイアウト
!!BorderLayout
*http://dojotoolkit.org/api/dijit.layout.BorderContainer
*http://dojotoolkit.org/reference-guide/1.7/dijit/layout/BorderContainer.html#dijit-layout-bordercontainer
*http://typea.info/blg/glob/2012/05/dojo-bordercontainer.html
{{ref_image dojo_boarder_layout.jpg}}
 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
     <style type="text/css">
     html, body {
         width: 100%;
         height: 100%;
         margin: 0;
         overflow:hidden;
     }
     #borderContainer{
         width:100%;
         height:100%;
     }
     </style>
     <title></title>
 </head>
 <body class="claro">
 
     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: true" id="borderContainer">
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">
         header
         </div>
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 200px;">
         menu
         </div>
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true">
         contents
         </div>
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: true">
         fotter
         </div>
     </div>
 
     <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
     </script>
     <script type="text/javascript">
     dojo.require("dijit.layout.BorderContainer");
     dojo.require("dijit.layout.ContentPane");
     dojo.addOnLoad(function(){
         
     });
     </script>
 </body>
 </html>
!!!Form
!!Button
*http://dojotoolkit.org/api/dijit.form.Button
*http://dojotoolkit.org/api/dijit.form.ComboButton
*http://dojotoolkit.org/api/dijit.form.DropDownButton
*http://dojotoolkit.org/api/dijit.form.ToggleButton

{{ref_image dojo_buttons.jpg}}
 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
     <title></title>
 </head>
 <body class="claro">
 
     <button data-dojo-type="dijit.form.Button" type="button">Button
         <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
             alert("Button Clicked!");
         </script>
     </button>
 
     <div data-dojo-type="dijit.form.ComboButton">
         <span>ComboButton</span>
         <div data-dojo-type="dijit.DropDownMenu">
             <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Item 1 clicked')}">Item 1</div>
             <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Item 2 clicked')}">Item 2</div>
         </div>
     </div>
 
     <div data-dojo-type="dijit.form.DropDownButton">
       <span>DropDown</span>
       <div data-dojo-type="dijit.TooltipDialog">
          <label for="name">Item 1:</label> <input data-dojo-type="dijit.form.TextBox" id="name" name="item1"><br>
          <label for="hobby">Item 2:</label> <input data-dojo-type="dijit.form.TextBox" id="hobby" name="item2"><br>
          <button data-dojo-type="dijit.form.Button" type="submit">OK</button>
       </div>
     </div>
 
     <button data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">
         Toggle
     </button>
 
     <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
     </script>
     <script type="text/javascript">
 
     // for all sample
     dojo.require("dijit.form.Button");   
     
     // for combo sample
     dojo.require("dijit.DropDownMenu"); 
     dojo.require("dijit.MenuItem");        
     
     // for dropdown sample
     dojo.require("dijit.Dialog");        
     dojo.require("dijit.form.TextBox");    
     dojo.require("dijit.TooltipDialog");
     
     dojo.addOnLoad(function(){
         
         
     });
     </script>
 </body>
 </html>
Dojo ひな形の変更点

Menu

記事一覧

カテゴリ別

プログラミング言語

Web

書籍

OS/環境

データベース

データベース製品

モデリング・パターン

環境

Webサービス

プロジェクトマネージメント

仮想化

Network

Office

CMS

構成管理

文章

教養

デザイン

業務

その他

ToDo

管理
