モジュールの動的ロードとロードイベントの処理

core. ブログの記事内などでのスクリプトに便利

モジュールの動的ロード (dojo.require)
もし以下のような関数を使うなら、

dojo.someModule.someFunction();

dojo.require("dojo.someModule");

dojo.addOnLoad(
  function(){dojo.byId('box').innerHTML='Loaded<br/>'});
dojo.addOnLoad(
  function(){dojo.byId('box').innerHTML+='Loaded(2)'});

DIV要素をHOVER指定できるリンクにする

core. jQuery拡張のBiggerlinkがあまりに素敵なので。

リスト表示ブロック内に写真と文字を配置するような場合でもごっそりリンク領域にできると嬉しいです、ポータルなどで活用できそうです。Aタグをブロック要素にすることでも可能ですが構造的に限界があります。これをDojoで出来るかやってみました。

まず、マウスオーバー時に自動追加されるHOVER用ののスタイルを定義（初期値.hover）。追加されるクラスは既存のクラスの上位に配置されるようなので"!important"が必要です。

<style type="text/css">	
.hover {
	cursor: pointer;
	background-color:#DAF1F1 !important;
}
.hover a:link,.hover a:visited {
	color: #006666 !important;
}
.hover .bar {
	background-color:#C7D8C6 !important;
}
</style>

<div class="listBox links">
  <strong><a href="http://...">Wiss</a></strong>
  <div>
    Dojo (Dojo Toolkit)は...<br/>
    <a href="http://...">Read more</a>
  </div>
</div>
・・・以上の繰り返し

<script type="text/javascript">
function biggerlink(opts) {
  var settings = { hoverclass:'hover', 
    targetclass:'hot' };
  if (opts) for (var k in opts) settings[k] = opts[k];
  //対象クラスすべてに処理
  dojo.query("."+settings.targetclass).forEach(
    function(el){
      dojo.connect(el,"onmouseover",function(){
        dojo.addClass(el,settings.hoverclass);
      });
      dojo.connect(el,"onmouseout",function(){
        dojo.removeClass(el,settings.hoverclass); 
      });
      dojo.connect(el,"onclick",function(e){
        var o = dojo.query("a",el)[0]; if (!o) return;
        window.location = o.href;
        e.stopPropagation(); //イベントの伝搬を中止
        e.preventDefault();  //デフォルト処理停止
      });
    }
  );
}
</script>

マウスオーバーのイメージを差し替える（rollover）

core. ロールオーバーの画像差し替え機能。よく使いそうなので考えてみました。

これもよく使われる機能ですので、Dojoを使ってシンプルなものを作ってみます。基本的なスクリプトの仕様は最もシンプルで快適なDaniel Nolan氏作のものを参考にしました。

<img src=".../rollover.gif"
      alt="Some Image" class="imgover" />
<script type="text/javascript">
dojo.addOnLoad(rollover);
function rollover(opts) {
  var settings = { hoverclass:'imgover',suffix:'_o' };
  if (opts) for (var k in opts) settings[k] = opts[k];
  //対象クラスすべてに処理
  dojo.query("img."+settings.hoverclass).forEach(
    function(el){
      var src = el.getAttribute('src');
      el.setAttribute('osrc', src);
      var hsrc = src.replace(/(\.gif|\.jpg|\.png)/,
          settings.suffix+"$1");
      el.setAttribute('hsrc', hsrc);
      //preload
      var temp = new Image();
      temp.src = hsrc;
      dojo.connect(el,"onmouseover",function(){
      el.setAttribute('src', el.getAttribute('hsrc'));
      });
      dojo.connect(el,"onmouseout",function(){
      el.setAttribute('src', el.getAttribute('osrc'));
      });
    }
  );
}
</script>

ボタンウィジェットとイベントの接続

dijit. DijitのGUI部品の基本であるボタンの使い方

headタグでスクリプトをロードします。

<script type="text/javascript" 
  src="/js/dojoroot/dojo/dojo.js"
  djConfig="parseOnLoad: true"></script>

<script type="text/javascript">
  dojo.require("dijit.form.Button");
  dojo.require("dijit.Menu");
</script>
<style>
  @import "/js/dojoroot/dijit/themes/tundra/tundra.css";
  @import "/js/dojoroot/dojo/resources/dojo.css";
</style>

<div class="tundra">
<button dojoType="dijit.form.Button" id="test">
  <span>Click here</span>
  <script type="dojo/method" event="onClick">
    alert('押しましたね？');
  </script>
</button>

<div dojoType="dijit.form.DropDownButton" id="test2">
  <span>Edit</span>
  <div dojoType="dijit.Menu" id="Edit">
    <div dojoType="dijit.MenuItem" label="Copy"
      onclick="alert('Copy!');"></div>
    <div dojoType="dijit.MenuItem" label="Cut" ></div>
  </div>
</div>
</div>