ページ

2011年3月11日金曜日

iGoogle Gadget -11

■ ガジェットについての使用上の案内、ガイド、情報などに活用できるメッセージを表示します。

■ 最も基本となるサンプルからはじめます。

■ 作成されたメッセージはすべて毎回表示されます。

■ ユーザーは確認後に[×]をクリックすることで非表示にできます。
(メッセージは一度非表示にすると、更新しない限り表示されません。)

■ サンプルです。 



<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="UIメッセージ-1-step-9" height="150" scrolling="false">
  <Locale lang="ja" country="jp"/>
  <Require feature="minimessage"/>
    // <Require feature="minimessage"/> を <ModulePrefs>の下におきます。
</ModulePrefs>
  <Content type="html">
  <![CDATA[
<div style="text-align:left;font-size:13px;">
【メッセージ-1】
<p />
* DOMを利用したメッセージの基本形です。
<br />
* ポイントすると背景色が変わります。
</div>
<div id="messageBox"></div>

<script type="text/javascript">
  var msg = new gadgets.MiniMessage(__MODULE_ID__); //MiniMessage オブジェクトをインスタンス化
  var div = document.createElement("div");
  div.innerHTML = "[x] をクリックするとメッセージは閉じます。"; //メッセージの内容
  div.onmouseover = function() { //DOMを利用して背景色を変えるonmouseover
    div.style.backgroundColor = "yellow";
  };
  div.onmouseout = function() {
    div.style.backgroundColor = "";
  };
  msg.createDismissibleMessage(div); //メッセージを作成

</script>
<p align="right" />
<a href="http://www5d.biglobe.ne.jp/~pog/" alt="Googleを追いかけろ!" title="Googleを追いかけろ!" target="_blank"><img src="http://www5d.biglobe.ne.jp/~pog/img/gapps.png" border="0"></a>
  ]]>
  </Content>
</Module>