Hellow World
Hellow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(['dojo/dom','dojo/domReady!'],
function(dom){
var x = dom.byId('greeting');
x.innerHTML = 'Hello World';
});
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
</body>
</html>
ボタン
Widget.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットの静的配置</title>
<!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく -->
<style>
@import url("dojo/resources/dojo.css");
@import url("dijit/themes/claro/claro.css");
</style>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/parser',
'dojo/domReady!'
], function(parser){
parser.parse();
});
</script>
<script type="text/javascript">
</script>
</head>
<body class="claro">
<!-- ウィジェット宣言 -->
<button data-dojo-type="dijit/form/Button"
data-dojo-props="label: 'クリックして'"
onClick="alert('ボタンがクリックされました！')">
</button>
</body>
</html>
ダイアログ
dialog.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットの静的配置</title>
<!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく -->
<style>
@import url("dojo/resources/dojo.css");
@import url("dijit/themes/claro/claro.css");
</style>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/parser',
'dojo/domReady!'
], function(parser){
parser.parse();
});
</script>
<script type="text/javascript">
</script>
</head>
<body class="claro">
<!-- ウィジェット宣言 -->
<button data-dojo-type="dijit/form/Button"
data-dojo-props="label: 'ダイアログを表示'"
onclick="dijit.byId('test_dialog').show()">
</button>
<div id="test_dialog" dojoType="dijit/Dialog" title="ダイアログのタイトル" execute="this.hide();">
<p>これはダイアログの内容です。</p>
<div dojoType="dijit.form.Button" type="submit">閉じる</div>
</div>
</body>
</html>
テキストボックス
textBox.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットの静的配置</title>
<!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく -->
<style>
@import url("dojo/resources/dojo.css");
@import url("dijit/themes/claro/claro.css");
</style>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/parser',
'dojo/domReady!'
], function(parser){
parser.parse();
});
</script>
<script type="text/javascript">
</script>
</head>
<body class="claro">
<!-- ウィジェット宣言 -->
<!-- テキストボックス -->
<div>
<label for="textBox">名前:</label>
<input id="textBox" data-dojo-type="dijit/form/TextBox"
data-dojo-props="placeHolder: '名前を入力してください'">
</div>
<!-- ボタン -->
<div style="margin-top: 10px;">
<button data-dojo-type="dijit/form/Button"
data-dojo-props="label: '送信'"
onclick="dijit.byId('test_dialog').show()">
</button>
</div>
<!-- ダイアログ -->
<div id="test_dialog" dojoType="dijit/Dialog" title="送信確認" execute="this.hide();">
<p>送信されました!</p>
<button dojoType="dijit.form.Button" type="submit">閉じる</button>
</div>
</body>
</html>
入力チェック
Validation.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットの静的配置</title>
<!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく -->
<style>
@import url("dojo/resources/dojo.css");
@import url("dijit/themes/claro/claro.css");
</style>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require([
'dojo/parser',
'dijit/form/ValidationTextBox'
]);
</script>
<script type="text/javascript">
</script>
</head>
<body class="claro">
<!-- ウィジェット宣言 -->
<!-- テキストボックス -->
<label for="phone">Phone number, no spaces:</label>
<input type="text" name="phone" id="phone" value="someTestString" required="true"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp:'[\\w]+',
invalidMessage:'スペースは含めないでください。',
promptMessage:'電話番号を入力してください。'" />
</body>
</html>