「Dojo ひな形」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==Dojo ひな形== [Dojo][JavaScript] ==基本形== <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">…」) |
|||
| 1行目: | 1行目: | ||
==Dojo ひな形== | ==Dojo ひな形== | ||
| − | [Dojo][JavaScript] | + | [[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.require("dijit.layout.BorderContainer"); | ||
| 23行目: | 23行目: | ||
}); | }); | ||
| − | + | </script> | |
| − | + | </body> | |
| − | + | </html> | |
==レイアウト== | ==レイアウト== | ||
===BorderLayout=== | ===BorderLayout=== | ||
| 32行目: | 32行目: | ||
*http://typea.info/blg/glob/2012/05/dojo-bordercontainer.html | *http://typea.info/blg/glob/2012/05/dojo-bordercontainer.html | ||
[[File:0393_dojo_boarder_layout.jpg]] | [[File: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 { | html, body { | ||
width: 100%; | width: 100%; | ||
| 48行目: | 48行目: | ||
height: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 | header | ||
| − | + | </div> | |
| − | + | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 200px;"> | |
menu | menu | ||
| − | + | </div> | |
| − | + | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"> | |
contents | contents | ||
| − | + | </div> | |
| − | + | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: true"> | |
fotter | 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.BorderContainer"); | ||
dojo.require("dijit.layout.ContentPane"); | dojo.require("dijit.layout.ContentPane"); | ||
| 76行目: | 76行目: | ||
}); | }); | ||
| − | + | </script> | |
| − | + | </body> | |
| − | + | </html> | |
==Form== | ==Form== | ||
===Button=== | ===Button=== | ||
| 86行目: | 86行目: | ||
*http://dojotoolkit.org/api/dijit.form.ToggleButton | *http://dojotoolkit.org/api/dijit.form.ToggleButton | ||
[[File:0394_dojo_buttons.jpg]] | [[File: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!"); | 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 | Toggle | ||
| − | + | </button> | |
| − | + | <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"> | |
| − | + | </script> | |
| − | + | <script type="text/javascript"> | |
// for all sample | // for all sample | ||
| 142行目: | 142行目: | ||
}); | }); | ||
| − | + | </script> | |
| − | + | </body> | |
| − | + | </html> | |
2020年2月15日 (土) 08:02時点における版
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">
<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
<!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>
© 2006 矢木浩人
