最近はちょっと疲れ気味なので、デザインを弄っているくらいです。 そろそろ職場で限定公開するので、見て呉れにも気を使わないとね。
jQuery Corner でボタンの角を丸くしたりしたんですが、そんなことしなくても jQuery UI 1.8 には Button というのがあるそうです。 もっと早く言ってくれよって感じですね。
でも、Button を適用すると、ボタンの色などのスタイルが、jQuery UI のテーマに統一されちゃうんですよね。 「次へ」とか「保存」、「リセット」など、機能別に色を変えたりしていたのですが。
Button の色は、スタイルシートから background で画像を読み込んでいるので、種類ごとにクラスを分けて、違う色の画像を読み込むように指定しました。
これらのスタイルは、Webアプリ全体のスタイルシートに記述しています。 jQuery UI のスタイルシートはその後に読み込まれるので、そのままでは上書きされてしまいます。
知らなかったのですが、上書きされたくないスタイルには !important を付ければいいのですね。
ボタンといえば、スタイルシートで cursor: pointer; と指定して、カーソル形状を指先に変えるようにしました。
これで jQuery UI を適用するページが全体の2/3くらいになりました。 そこで、Smarty のテンプレート側に jQuery UI の読み込みを記述するように変更しました。
jQuery UI 1.8 からは position なんてのもあります。 これを使えば、IE6／IE7 での position:relative; overflow: hidden; が期待した通りの表示になるのかな？ 時間があるときに試してみたいですね。