jQuery Mobileの角丸を無効化するスニペットをかいた

標準UIは丸くてテカテカしてる


jQuery Mobile

jQuery Mobile


jQueryMobile標準UIのまるまるとした見た目が,デザインテイストに合わなかったのでざっくりと無効化してみます.

それらしい初期化プロパティが見つからなかったので,CSSで工夫せずにJavaScript側で強引に角丸系クラスを除去します.

.ui-corner-*を除去するスニペット

以下のスクリプトをどこかで動くようにしておけばOKです.自由に使ってください.

$(document).bind('pagecreate', function(e)
{
    $('[class*="ui-corner-"]', e.target).removeClass(function(i, klass){
        var matches = klass.match(/ui-corner-\w+/g) || [];
        return matches.join(' ');
    });
});

pagecreateイベントまたはpagebeforeshowイベントにバインドして,表示されるページ(e.target)の中から,ui-cornerをクラス名に含むヤツを抽出して一括で削除しています.

ちなみに,ui-cornerはjQuery UI由来のCSS用クラスで,これらをjQuery Mobileがページ初期化時に勝手に割り当ててると思われる.

jQuery MobileのUI改造,ちょっと慣れてきたかも.


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search