dojo toolkitはデフォルトで各種ウィジェットが付いていて便利ですが、現時点ではまだテーマが充実していません。
実質的に使えるのは、tundraとsoriaくらいだと思います。
どちらもコントロールが角張っているので、丸くしたくなることがあります。
ダイアログの角丸は、-moz-border-radius
/ -webkit-border-radius
を使えば簡単にできますが、IEなどにも対応しようと思うと、ウィジェットテンプレートを書き換えたりJavaScriptで要素を書き換えたりしないといけません。
ボタン(高さ固定)は、IEを含め比較的簡単に角丸にできますので、今回はこちらを紹介します。
手順
テーマの自作になりますので、まずはsoriaあたりをコピーして、これを上書きしていくことにします。
soria.css を mytheme.css にリネームして、.soria を .mytheme に一括置換(手抜き)してしまいましょう。
そして、角丸実現のために以下のような記述をCSSに追加します。
/* mytheme.css */
.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テーマをきちんと解読して矛盾が無いようにすべきですが、小規模ならこんな安易な改造も可能です。