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

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


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改造,ちょっと慣れてきたかも.