it-swarm.com.de

Wie kann ich das Stylen von <select> -Dropdowns in jQuery Mobile deaktivieren?

Ich muss das Stylen von <select>-Dropdowns in jQuery Mobile deaktivieren. Letztendlich möchte ich, dass das Gerät selbst (iPhone, Android, Blackberry usw.) bestimmt, wie das Dropdown-Menü <select> aussieht.

Derzeit ist mein Markup (für Anzeigezwecke reduzierte Optionsmenge):

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

Ich habe versucht, data-role="none" für den <select> zu verwenden, aber nichts hat sich geändert.

Gibt es eine Möglichkeit, jQuery Mobile nur für das Dropdown-Menü select "auszuschalten"?

23
thorn100

gemäß http://jquerymobile.com/test/docs/forms/docs-forms.html

Wenn Sie möchten, dass ein bestimmtes Formularsteuerelement von jQuery Mobile nicht berührt wird, geben Sie diesem Element einfach das Attribut data-role = "none" an. Zum Beispiel:

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

Seit Version 1.1 ist der richtige Weg: data-enhance="false"

Sie müssen diese Zeile auch zu config hinzufügen:

$.mobile.ignoreContentEnabled = true;

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

3
Yury Gomozov

Obwohl diese Frage bereits als beantwortet betrachtet wird, möchte ich noch ein paar Zeilen hinzufügen, da die Antwort für mich nicht "out-of-the-box" funktionierte und dies anderen Zeit spart.

In meinem Fall deaktiviere ich die nativen Dropdowns für eine Smartphone-Anwendung, wenn sie unter Android läuft (da beim Öffnen von nativen Dropdowns, die bereits in einem anderen Thread gemeldet wurden, hässliche Probleme auftreten). Der "Zauber", der das Problem für mich gelöst hat, sind nur die folgenden Zeilen:

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

Diese Zeilen befinden sich in einem Anpassungsskript, das direkt nach jQuery und direkt vor jQuery-Mobile geladen wird. Es ist wichtig, die Reihenfolge einzuhalten , andernfalls sind die Steuerelemente bereits initialisiert und haben keine Auswirkung!

Ich hoffe, dieser Rat kann jemandem Zeit sparen!

1
opalenzuela

Korrigieren Sie den jQM-Selector in mobileinit wie erwartet:

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

Die Verwendung dieser Eigenschaft sollte helfen

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

probiere einfach data-native-menu="true"

from doc: Durch Hinzufügen des Attributs data-native-menu = "true" zum select verwendet das Framework das native select-Menü des Browsers, wenn auf die select-Schaltfläche geklickt wird. Da diese Option keine der benutzerdefinierten Menüanalyse- und Menügenerierungslogik verwendet, ist sie erheblich schneller als die benutzerdefinierte Menüversion. Die benutzerdefinierten Auswahlmenüs bieten die Möglichkeit, die Auswahl zu gestalten und visuelle Konsistenz für alle Plattformen bereitzustellen Darüber hinaus behebt es einige fehlende Funktionen auf bestimmten Plattformen: Optgroup-Unterstützung für Android, Mehrfachauswahl für WebOS und eine elegante Möglichkeit, Platzhalterwerte zu verarbeiten.

Für mehr Information

0
bCliks

Sie arbeiten immer noch daran, arbeiten mit dem neuesten Git-Code, aber ich würde es nicht empfehlen: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/ 350

0
Mark

Ja, Sie müssen in die CSS-Datei wechseln, die den Dropdown-Stil der JQuery Mobile-Benutzeroberfläche steuert, und alle Stile entfernen, die nicht angezeigt werden sollen.

0
Jack