dojoで角丸ボタン

このエントリーをはてなブックマーク
Share

dojo toolkitはデフォルトで各種ウィジェットが付いていて便利ですが、現時点ではまだテーマが充実していません。
実質的に使えるのは、tundraとsoriaくらいだと思います。

どちらもコントロールが角張っているので、丸くしたくなることがあります。

ダイアログの角丸は、-moz-border-radius / -webkit-border-radius を使えば簡単にできますが、IEなどにも対応しようと思うと、ウィジェットテンプレートを書き換えたりJavascriptで要素を書き換えたりしないといけません。

ボタン(高さ固定)は、IEを含め比較的簡単に角丸にできますので、今回はこちらを紹介します。

テーマの自作になりますので、まずはsoriaあたりをコピーして、これを上書きしていくことにします。
soria.css を mytheme.css にリネームして、.soria を .mytheme に一括置換(手抜き)してしまいましょう。

そして、角丸実現のために以下のような記述を追加します。

.mytheme .dijitButtonNode .dijitButtonContents {
	background: url(images/button_back.png) repeat-x 0 0;
}
.mytheme .dijitButton .dijitRight {
	background: url(images/button_right.png) no-repeat top right;
}
.mytheme .dijitLeft.dijitButton {
	background: url(images/button_left.png) no-repeat top left;
}

button_leftは左側の丸い画像、button_rightは右側の丸い画像、button_backは中央の矩形部分の画像です。
これらのファイルは自分で作ってimagesに入れておきます。
これだけで丸くなります。

ちゃんとやるときは、soriaテーマをきちんと解読して矛盾が無いようにすべきですが、小規模ならこんな安易な改造も可能です。

IEでのdojo.requireの挙動

このエントリーをはてなブックマーク
Share

DojoToolkitのお話です。

dojo.requireを使うと、JavaScriptを動的に読み込むことができます。
<script>タグを書くのに比べて、読み込むタイミングを制御できるため、大規模な開発に向いています。

しかし、<script>の羅列を単純に置き換えると、動かないことがあります。

読み込まれるファイルで var Test = {}; のように記述した場合、FirefoxではTestを参照できますが、IEでは参照できません。
この関数は、JavaScriptリソースを文字列として取得し、最終的にevalを使って評価しているのですが、FirefoxとIEでevalの挙動が違うためだと思われます。

dojo.requireを使うときは、簡単なクラスを定義する場合でも必ずdojo.declare() を使うことで、IEでも参照できるようになります。

COPYRIGHT [C] 2009 BEYOND PERSPECTIVE SOLUTIONS LTD. ALL RIGHTS RESERVED.