Dojo/JavaScript Toolkitのメモ

Toasterは、ブラウザの端からポップアップされるメッセージを表示する。Toasterを利用するときは、dojo.widget.Toasterをrequireする。

Toasterを作成するには、dojoType="toaster"を指定したdiv要素を作成する。positionDirection属性により表示する位置を指定できる。表示位置は、"br-up", "br-left", "bl-up", "bl-right", "tr-down", "tr-left", "tl-down", "tl-right"のように指定できる。

Toasterを表示する方法は、setContentメソッドを用いる方法と、dojo.event.topic.publishによりメッセージを発行する方法の２つがある。

setContent

Toaster widgetに対して、setContentメソッドを実行することでメッセージが表示される。setContentは、メッセージとして表示する文字列、メッセージの種類、メッセージの表示時間の３つの引数を指定して実行する。メッセージの種類には"MESSAGE", "WARNING", "ERROR", "FATAL"の４つのいずれかを指定できる。指定したメッセージの種類によって表示されるメッセージの背景色が変わる。

<script type="text/javascript">
dojo.require("dojo.widget.Toaster");

function showToasterMessage(){
  var toast = dojo.widget.byId("toast");
  toast.setContent('てすと', "MESSAGE", 500);
}
</script>

<div dojoType="toaster" id="toast" positionDirection="br-left"></div>
<button type="submit" onclick="showToasterMessage();">click</button>

publich

dojoType="toaster"を指定したdiv要素において、messageTopic属性としてtopic名を指定したとき、同じtopic名でメッセージを発行することで、Toasterのメッセージを表示することもできる。

<script type="text/javascript">
function showToasterMessage2(){
  dojo.event.topic.publish("testTopic", "てすと");
}
</script>

<div dojoType="toaster" id="toast2" positionDirection="br-left" showDelay="4000" messageTopic="testTopic"></div>
<button type="submit" onclick="showToasterMessage2();">click</button>

publishするメッセージは、文字列だけでなく、次のようなオブジェクトも指定できる。

  dojo.event.topic.publish("testTopic", {message: "てすと", type: "ERROR", delay: 500}););