「Dojo ひな形」の版間の差分
ナビゲーションに移動
検索に移動
| 1行目: | 1行目: | ||
| − | ==Dojo ひな形== | + | ==[[Dojo ひな形]]== |
[[Dojo]] | [[JavaScript]] | | [[Dojo]] | [[JavaScript]] | | ||
==基本形== | ==基本形== | ||
| − | <!DOCTYPE HTML> | + | <!DOCTYPE [[HTML]]> |
<html> | <html> | ||
<head> | <head> | ||
| 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> | + | <!DOCTYPE [[HTML]]> |
<html> | <html> | ||
<head> | <head> | ||
| 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> | + | <!DOCTYPE [[HTML]]> |
<html> | <html> | ||
<head> | <head> | ||
| 103行目: | 103行目: | ||
<div data-dojo-type="dijit.form.ComboButton"> | <div data-dojo-type="dijit.form.ComboButton"> | ||
<span>ComboButton</span> | <span>ComboButton</span> | ||
| − | <div data-dojo-type="dijit. | + | <div data-dojo-type="dijit.DropDown[[Menu]]"> |
| − | <div data-dojo-type="dijit. | + | <div data-dojo-type="dijit.[[Menu]]Item" data-dojo-props="onClick:function(){alert('Item 1 clicked')}">Item 1</div> |
| − | <div data-dojo-type="dijit. | + | <div data-dojo-type="dijit.[[Menu]]Item" data-dojo-props="onClick:function(){alert('Item 2 clicked')}">Item 2</div> |
</div> | </div> | ||
</div> | </div> | ||
| 130行目: | 130行目: | ||
// for combo sample | // for combo sample | ||
| − | dojo.require("dijit. | + | dojo.require("dijit.DropDown[[Menu]]"); |
| − | dojo.require("dijit. | + | dojo.require("dijit.[[Menu]]Item"); |
// for dropdown sample | // for dropdown sample | ||
2020年2月16日 (日) 04:24時点における最新版
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 矢木浩人
