有限会社 ウィス
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 でテーマのクラス名を追加しています。