web-dev-qa-db-fra.com

Comment "désactiver" le style des menus déroulants <select> de jQuery Mobile?

Je dois désactiver le style de la liste déroulante <select> de jQuery Mobile. En fin de compte, j'aimerais que l'appareil lui-même (iPhone, Android, Blackberry, etc.) détermine l'aspect de la liste déroulante <select>.

Actuellement, mon marquage est (quantité d'option réduite pour l'affichage):

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

J'ai essayé d'utiliser data-role="none" sur le <select> mais rien n'a changé.

Existe-t-il un moyen de "désactiver" jQuery Mobile uniquement pour le menu déroulant de sélection?

jqueryhtmlmobilemobile-website
23
thorn100

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

Si vous préférez que jQuery Mobile ne modifie pas un contrôle de formulaire particulier, attribuez simplement à cet élément l'attribut data-role = "none". Par exemple:

<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

Depuis la version 1.1, la bonne façon de le faire est: data-enhance="false"

Vous devrez également ajouter cette ligne à config:

$.mobile.ignoreContentEnabled = true;

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

3
Yury Gomozov

Bien que cette question fasse déjà l’objet d’une réponse, j'aimerais ajouter quelques lignes supplémentaires, car la réponse n’a pas fonctionné de manière «prête à l’emploi» pour moi, ce qui pourrait faire gagner du temps à d’autres.

Dans mon cas, je désactive les menus déroulants natifs pour une application pour smartphone lorsqu’elle s’exécute sous Android (puisqu’il a quelques problèmes déplaisants lors de l’ouverture de menus déroulants natifs, déjà signalé dans un autre fil). Le "sortilège" qui m'a résolu le problème n'est que les lignes suivantes:

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

Ces lignes sont dans un script de personnalisation chargé juste après jQuery et juste avant jQuery-Mobile. Il est important de garder l'ordre , sinon les commandes sont déjà initialisées et cela n'a aucun effet!

J'espère que ce conseil peut faire gagner du temps à quelqu'un!

1
opalenzuela

Dans mobileinit, corrigez le sélecteur jQM pour qu'il se comporte comme prévu:

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

L'utilisation de cette propriété devrait aider

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

essayez juste data-native-menu="true"

from doc: En ajoutant l'attribut data-native-menu = "true" à select, le framework utilisera le menu de sélection natif du navigateur lorsque l'utilisateur cliquera sur le bouton de sélection. Comme cette option n’utilise aucune logique d’analyse de menu personnalisée ni de génération de menu, elle est bien plus rapide que la version de menu personnalisé. Les menus de sélection personnalisés permettent de thématiser la sélection et d’assurer la cohérence visuelle entre les plates-formes. En outre, il corrige certaines fonctionnalités manquantes sur certaines plates-formes: prise en charge optgroup sur Android, fonctionnalité de sélection multiple sur WebOS et ajoute un moyen élégant de gérer les valeurs d'espace réservé.

pour plus d'informations

0
bCliks

Ils travaillent encore dessus, ils fonctionnent dans le dernier code git mais je ne le recommanderais pas: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/ 350

0
Mark

Oui, vous devez accéder au fichier CSS qui contrôle le style de liste déroulante JQuery Mobile UI et supprimer tout style que vous ne souhaitez pas afficher.

0
Jack