jQuery Mobileでページ遷移時のボタンの色を変える。

jQuery Mobileを利用して制作したサイト(単一のHTMLに複数のページを設置)で、あるボタンをクリック(タップ)すると該当のidを探してコンテンツをロードするまでに一瞬の間が空く。この間のボタンの色がページのデザインと合わなかったため変更することにした。

jQuery Mobileの場合、ページ構築中にclass等のタグをいろいろと追加したりするので何か特殊なものがあるかと思ったけれど、何のことはなく.ui-btn-activeだけだった。

よって、jquery.mobile-x.x.x.cssの下記該当部分を書き換えるか、別の外部cssで上書きすることで実現できた。

.ui-btn-active {
	/*オリジナル(一部抜粋)
	border: 1px solid #2373A5;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#5393C5),to(#6FACD5));
	text-shadow: 0 1px 1px #3373A5;
	*/

	border: 1px solid #aaaaaa;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#eeeeee),to(#cccccc));
	text-shadow: 0 1px 1px #cccccc;
}

jQuery Mobileはなんだかんだと便利だなあ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA