有限会社 ウィス
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
core. ブログの記事内などでのスクリプトに便利
モジュールの動的ロード (dojo.require)
もし以下のような関数を使うなら、
dojo.someModule.someFunction();その前に関数が含まれるモジュールをロードしておきます。
dojo.require("dojo.someModule");これによって遅延ロードが可能でページの初期表示を軽くすることが可能です。また、JAVAのパッケージのインポート(import)と同じで、重複してロードされる事はありません。
dojo.addOnLoad( function(){dojo.byId('box').innerHTML='Loaded<br/>'}); dojo.addOnLoad( function(){dojo.byId('box').innerHTML+='Loaded(2)'});
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>
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>Dijitのウィジェットを使用する場合は、dojo.jsを呼ぶ際、djConfig="parseOnLoad: true" と指定します。これはページ読込み時にDOMをパースする指定で、dojoがウィジェットタイプを参照し表示を変えるため必要になります。
<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>require で Button と Menu を呼び出します。