jQuery Mobileのスタイルを「オフ」にする方法<select>ドロップダウン？

Question

jQuery Mobileのスタイリング<select>のドロップダウンをオフにする必要があります。最終的には、デバイス自体（iPhone、Android、Blackberryなど）に、<select>のドロップダウンがどのように見えるかを判断したいと思います。

現在、私のマークアップは、（表示のために縮小オプション量）である：

<div data-role="fieldcontain"> 
    <label for="state">State:</label> 
    <select name="state" id="state" data-role="none"> 
     <option value="MA">Massachusetts</option> 
     <option value="MI">Michigan</option> 
     <option value="MN" selected="selected">Minnesota</option> 
     <option value="MS">Mississippi</option> 
    </select> 
</div> 

私は<select>にdata-role="none"を使用してみましたが、何も変わっていません。

jQuery Mobileを選択解除するだけで「オフ」にする方法はありますか？

Answer 1

を助けるべきで、このプロパティを使用して、あなたの場合特定のフォームコントロールをjQuery Mobileにそのまま残しておくことをお勧めします。単純にその要素に属性data-role = "none"を指定するだけです。たとえば：mobileinitインサイド

<label for="foo"> 
<select name="foo" id="foo" data-role="none"> 
<option value="a" >A</option> 
<option value="b" >B</option> 
<option value="c" >C</option> 
</select> 

Answer 2

はい、JQuery Mobile UIのドロップダウンスタイルを制御するCSSファイルに移動し、表示したくないスタイリングを削除する必要があります。彼らはまだそれに取り組んでいる

Answer 3

は、最新のgitコードを動作しますが、私はそれをお勧めwouldntの： https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

Answer 4

http://jquerymobile.com/test/docs/forms/docs-forms.html

に応じ

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file... 

Answer 5

、期待通りに動作するようにjQMセレクタを修正：

$.mobile.selectmenu.prototype.options.initSelector = 'select:not(:jqmData(role="none"), :jqmData(role="slider"))'; 

Answer 6

バージョン1.1にそれを行うための正しい方法以来です：あなたはまた、する必要がありますdata-enhance="false"

configにこの行を追加してください。

$.mobile.ignoreContentEnabled = true; 

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Answer 7

この質問は既に答えられていると考えられますが、回答は私のために「すぐに」機能しなかったので、いくつかの行を追加したいと思います。

私の場合、Android搭載のスマートフォンアプリケーションのネイティブのドロップダウンを無効にしています（別のスレッドで既に報告されているネイティブのドロップダウンを開くときに醜い問題があるため）。これらの行はちょうどjQueryの後、ちょうどjQueryのモバイルの前にロードされたカスタマイズスクリプトである

$(document).bind('mobileinit',function(){ 
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { 
     $("select").attr("data-native-menu","true"); 
    } else { 
     $("select").attr("data-native-menu","false"); 
     $.mobile.selectmenu.prototype.options.nativeMenu = false; 
    }    
}); 

：私に問題を解決した「魔法の呪文は」ただ次の行です。 オーダーのままにしておくことが重要です。そうしないと、コントロールはすでに初期化されており、効果はありません。

私はこのアドバイスが誰かに時間を節約できることを願っています！

Answer 8

ちょうどドキュメントからdata-native-menu="true"

してみてください：選択ボタンをクリックしたときに選択するために、データ・ネイティブメニュー=「true」属性を追加することにより を、フレームワークは、ブラウザのネイティブ選択メニューを使用します。このオプションは、カスタムメニュー解析とメニュー生成ロジックを使用しないため、カスタムメニューバージョンよりもはるかに高速です。 カスタムセレクトメニューは、テーマを選択する機能を追加し、プラットフォーム間で視覚的な一貫性を提供します。また、特定のプラットフォームで欠けているいくつかの機能を修正しました：Androidのoptgroupサポート、WebOSのマルチセレクト機能、プレースホルダ値。

for more info