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

MyMemoWiki

Dojo ひな形

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

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

0393 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

0394 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>