web-dev-qa-db-ja.com

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

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>

data-role="none"で<select>を使用してみましたが、何も変わりませんでした。

選択ドロップダウンだけでjQuery Mobileを「オフ」にする方法はありますか？

jqueryhtmlmobilemobile-website
23
thorn100

によると http://jquerymobile.com/test/docs/forms/docs-forms.html

特定のフォームコントロールをjQuery Mobileにそのまま残したい場合は、その要素にdata-role = "none"属性を指定します。例えば：

<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>
40
user418775

バージョン1.1以降、正しい方法はdata-enhance="false"です。

また、この行をconfigに追加する必要があります。

$.mobile.ignoreContentEnabled = true;

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

3
Yury Gomozov

この質問はすでに回答済みと見なされていますが、回答が「そのまま」機能しなかったため、さらに行を追加します。これにより、他の人の時間を節約できる可能性があります。

私の場合、Android（ネイティブドロップダウンを開くときにいくつかの醜い問題があるため、別のスレッドで既に報告されているため）ので、スマートフォンアプリケーションのネイティブドロップダウンを無効にしています。私に問題を解決した魔法の呪文は、次の行だけです：

$(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;
    }               
});

これらの行は、jQueryの直後でjQuery-Mobileの直前に読み込まれたカスタマイズスクリプトにあります。 順序を維持することが重要です、そうでない場合、コントロールはすでに初期化されており、効果がありません！

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

1
opalenzuela

Mobileinit内で、jQMセレクターが期待どおりに動作するように修正します。

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

このプロパティを使用すると役立つはずです

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

ちょうど試して data-native-menu="true"

from doc：data-native-menu = "true"属性を選択に追加することにより、フレームワークは、選択ボタンがクリックされたときにブラウザーのネイティブ選択メニューを使用します。このオプションは、カスタムメニュー解析およびメニュー生成ロジックを使用しないため、カスタムメニューバージョンよりも大幅に高速です。カスタム選択メニューは、選択のテーマを設定し、プラットフォーム間で視覚的な一貫性を提供する機能を追加します。さらに、特定のプラットフォームで欠落している機能を修正します。Androidでのoptgroupサポート、WebOSでの複数選択機能、およびプレースホルダーを処理するエレガントな方法を追加します値。

詳細

0
bCliks

彼らはまだそれに取り組んでおり、最新のgitコードで動作しますが、お勧めしません： https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/35 =

0
Mark

はい、JQueryモバイルUIドロップダウンスタイルを制御するCSSファイルに移動し、表示したくないスタイルを削除する必要があります。

0
Jack