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
<!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">
header
menu
contents
fotter
<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
<!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>
ComboButton
Item 1
Item 2
DropDown
<label for="name">Item 1:</label> <input data-dojo-type="dijit.form.TextBox" id="name" name="item1">
<label for="hobby">Item 2:</label> <input data-dojo-type="dijit.form.TextBox" id="hobby" name="item2">
<button data-dojo-type="dijit.form.Button" type="submit">OK</button>
<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>
© 2006 矢木浩人
