有限会社 ウィス
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
dijit. 簡単なエフェクト、DIVブロックのフェードイン
<div class="tundra"> <button dojoType="dijit.form.Button" id="out"> <span>ふぇーどあうと</span> <script type="dojo/method" event="onClick"> dojo.fadeOut({node:"targetDiv",duration:1000}).play(); </script> </button> <button dojoType="dijit.form.Button" id="in"> <span>ふぇーどいん</span> <script type="dojo/method" event="onClick"> dojo.fadeIn({node:"targetDiv",duration:1000}).play(); </script> </button> <style> .box{ margin:5px; padding:5px; background-color: #ccc; color: #000; } </style> <div id="targetDiv" class="box"> DojoはフルスタックのJavascriptフレームワークです。 すべてがオールインワンなのでサイト全体で 一貫して利用する事ができます。 </div> </div>
dijit. カラーパレットを表示して色を選択します。
<script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.require("dijit.ColorPalette"); </script> <style> @import "/js/dojoroot/dijit/themes/tundra/tundra.css"; </style> <div class="tundra"> <div dojoType="dijit.ColorPalette" palette="7x10" onChange="dojo.byId('col').innerHTML=this.value;"></div> その色は <span id="col"></span> </div>
dijit. カラーパレットにドロップダウンを加えた応用編。
<script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.require("dijit.ColorPalette"); </script> <style> @import "/js/dojoroot/dijit/themes/tundra/tundra.css"; </style> <div class="tundra"> <button dojoType="dijit.form.DropDownButton"> <span>色選択</span> <div dojoType="dijit.ColorPalette" palette="7x10" onChange="dojo.byId('col').innerHTML=this.value;"> </div> </button> その色は <span id="col"></span> </div>ColorPalette を DropDownButton の中に入れるのがミソです。
dijit. シンプルなダイアログを表示します。
<script type="text/javascript"> //bodyにテーマクラスを指定 dojo.query("body").addClass("tundra"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); </script> <style> @import "/js/dojoroot/dijit/themes/tundra/tundra.css"; #dialog1{color:#000;} </style> <div class="tundra"> <button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()"> <span style="color:#000">ダイアログ表示</span> </button> <div dojoType="dijit.Dialog" id="dialog1" title="ダイアログ" execute="alert('OK!');"> <div style="text-align:center"> ダイアログです <button dojoType="dijit.form.Button" type="submit"> O K</button> </div> </div> </div>ダイアログは、半透明の背景を被せその上にダイアログを表示するため、ブログ内のように BODY に Themeクラスを適用できないと表示できないため、dojo.query を使ってBODYエレメントを取り出し、addClass でテーマのクラス名を追加しています。