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

MyMemoWiki

差分

ナビゲーションに移動 検索に移動

Dojo ひな形 (ソースを閲覧)

2020年2月15日 (土) 08:02時点における版

542 バイト追加 、 2020年2月15日 (土) 08:02
編集の要約なし
==Dojo ひな形==
[[Dojo][JavaScript]]
==基本形==
<&lt;!DOCTYPE HTML>&gt; <&lt;html>&gt; <&lt;head>&gt; <&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">&gt; <&lt;link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>&gt; <&lt;title><&gt;&lt;/title>&gt; <&lt;/head>&gt; <&lt;body class="claro">&gt; <&lt;!--メインコンテンツ-->&gt;
<&lt;script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">&gt; <&lt;/script>&gt; <&lt;script type="text/javascript">&gt;
// ここでコンポーネントのインポート
dojo.require("dijit.layout.BorderContainer");
});
<&lt;/script>&gt; <&lt;/body>&gt; <&lt;/html>&gt;
==レイアウト==
===BorderLayout===
*http://typea.info/blg/glob/2012/05/dojo-bordercontainer.html
[[File:0393_dojo_boarder_layout.jpg]]
<&lt;!DOCTYPE HTML>&gt; <&lt;html>&gt; <&lt;head>&gt; <&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">&gt; <&lt;link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>&gt; <&lt;style type="text/css">&gt;
html, body {
width: 100%;
height:100%;
}
<&lt;/style>&gt; <&lt;title><&gt;&lt;/title>&gt; <&lt;/head>&gt; <&lt;body class="claro">&gt;
<&lt;div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: true" id="borderContainer">&gt; <&lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">&gt;
header
<&lt;/div>&gt; <&lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 200px;">&gt;
menu
<&lt;/div>&gt; <&lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true">&gt;
contents
<&lt;/div>&gt; <&lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: true">&gt;
fotter
<&lt;/div>&gt; <&lt;/div>&gt;
<&lt;script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">&gt; <&lt;/script>&gt; <&lt;script type="text/javascript">&gt;
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
});
<&lt;/script>&gt; <&lt;/body>&gt; <&lt;/html>&gt;
==Form==
===Button===
*http://dojotoolkit.org/api/dijit.form.ToggleButton
[[File:0394_dojo_buttons.jpg]]
<&lt;!DOCTYPE HTML>&gt; <&lt;html>&gt; <&lt;head>&gt; <&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">&gt; <&lt;link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>&gt; <&lt;title><&gt;&lt;/title>&gt; <&lt;/head>&gt; <&lt;body class="claro">&gt;
<&lt;button data-dojo-type="dijit.form.Button" type="button">&gt;Button <&lt;script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">&gt;
alert("Button Clicked!");
<&lt;/script>&gt; <&lt;/button>&gt;
<&lt;div data-dojo-type="dijit.form.ComboButton">&gt; <&lt;span>&gt;ComboButton<&lt;/span>&gt; <&lt;div data-dojo-type="dijit.DropDownMenu">&gt; <&lt;div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Item 1 clicked')}">&gt;Item 1<&lt;/div>&gt; <&lt;div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Item 2 clicked')}">&gt;Item 2<&lt;/div>&gt; <&lt;/div>&gt; <&lt;/div>&gt;
<&lt;div data-dojo-type="dijit.form.DropDownButton">&gt; <&lt;span>&gt;DropDown<&lt;/span>&gt; <&lt;div data-dojo-type="dijit.TooltipDialog">&gt; <&lt;label for="name">&gt;Item 1:<&lt;/label> <&gt; &lt;input data-dojo-type="dijit.form.TextBox" id="name" name="item1"><&gt;&lt;br>&gt; <&lt;label for="hobby">&gt;Item 2:<&lt;/label> <&gt; &lt;input data-dojo-type="dijit.form.TextBox" id="hobby" name="item2"><&gt;&lt;br>&gt; <&lt;button data-dojo-type="dijit.form.Button" type="submit">&gt;OK<&lt;/button>&gt; <&lt;/div>&gt; <&lt;/div>&gt;
<&lt;button data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">&gt;
Toggle
<&lt;/button>&gt;
<&lt;script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">&gt; <&lt;/script>&gt; <&lt;script type="text/javascript">&gt;
// for all sample
});
<&lt;/script>&gt; <&lt;/body>&gt; <&lt;/html>&gt;
「https://www.typea.info/tips_/index.php/特別:携帯機器差分/3142」から取得

© 2006 矢木浩人

案内メニュー