2011-09-30 9 views
0

jQuery Mobileは入力エレメントのすべてのコーナーを自動的に丸めます。クラスはui-corner-allです。私は、このクラスをChromeのインスペクタでui-corner-leftに手動で変更すると、が正しく表示され、左端(上端と下端)にはの角が丸く表示されることに気付きました。もちろん、これは簡単に私の質問は、私はjQueryのモバイルは、この余分なビットを実行することなく、すぐにこのクラスを適用するように指示することができる方法がありますされるようjQuery Mobile:すべてのコーナーの丸めを明示的にオーバーライドします

$('#myid').removeClass('ui-corner-all').addClass('ui-corner-left'); 

として、jQueryのの1行で行うことができますJQMがその作業を終えた後のコード?

+2

のように行うことができますあなたはそれをしたい。しかし、あなたの現在の解決策はうまくいくはずだと思います。なぜコードの単一行についての懸念?ページが読み込まれたときにJQMがどれくらい前に行っているのか分かりましたか?そのほんの少しのコードがそれほど大きな問題を引き起こしてはいけません。 –

+0

はい、そうです - JQMは既にコードを実行しているので、実際には1行ではパフォーマンスの違いはありません。私の本当のモチベーションは、UIのものを集中管理し、「宣言的」に保つことです。しかし、このソリューションでは、私のUIは、CSSとマークアップ自体だけでなく、JSコードのいくつかの奇妙なビットの間でも分割されてしまいます。 –

答えて

0

基本的に以下のことを適用することができますが、あなたの心配は余分なコードの実行なしで実行することです、私たちは同じ質問をしています。

$('div').live('pageshow',function(event){ 
    $('#myid').removeClass('ui-corner-all').addClass('ui-corner-left'); 
}); 
+1

あなたがやったことは、私が上記で書いたのと同じコードをコピー&ペーストしたことでした。 'pageshow'ハンドラでそれをラップすることは私の質問には関係ありません。 –

0

デフォルトの値を上書きするには、必要なjqueryモバイルクラスをindex.htmlファイルに指定します。 、UI-コーナーFirefoxで

<ul id='myid' data-inset='true' data-theme='a' data-role='listview' class='ui-listview ui-corner-left ui-listview-inset ui-shadow'> 

:自動的にこの

class ui-corner-all 

は、あなたがして独自のクラスを追加する挿入思われる

<ul id='myid' data-inset='true' data-theme='a' data-role='listview' class='ui-listview ui-listview-inset ui-shadow'> 

:良い例では代わりに、だろう - すべてのクラスが自動的に私のために追加されていない、多分jqueryモバイルの古いバージョンを使用しているとアップグレードする必要があります。 あなたはjavascriptのファイルで動的にそれをしたい場合:

$("#my_page_id").live("pagecreate",function(){ 
    var ul = $("<ul id='myid' data-inset='true' data-theme='a' data-role='listview' class='ui-listview ui-listview-inset ui-corner-left ui-shadow'>"); 
    ul.append($('<li class="ui-li ui-li-static ui-body-a ui-corner-left">').append("Code Slayer!!!")); 
    $('mydiv_in_mypage').html(ul); 

});

のように、divの内容をもう一度書き直して、古い内容を自動的に消去します。あなたがあなたのリストに多くの情報を表示する場合は、

$.mobile.showPageLoadingMsg('a','Page Loading', true); 

を使用することもできますし、あなたのページが完全に表示されたときに、メッセージを非表示にします。

0

ちょっとだけあなたはあなたが他と1つのクラスを置き換えるためにJQMのソースコードを修正することができる、またはあなたがように動作するようにUI-コーナーすべてを作るためにJQM CSSを修正することができ、この

<a href="#panel" data-corners="false"></a> 
関連する問題