iPhone / Android induire natif Déroulant sélecteur

Est-il un moyen pour (éventuellement avec phoneGap) induisent le natif de mobile déroulant sélecteur pour un ensemble d'éléments?

Par exemple, quelqu'un clique sur une liste:

<ul class="dropdown">
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Apples</li>
    <li>Pears</li>
</ul>

Et l'ensemble des éléments qui apparaît dans un natif iOS déroulant sélecteur et vous pouvez cliquer sur l'un d'eux? Une liste déroulante dont je parle peut être vu ici:

iPhone /Android induire natif Déroulant sélecteur

Je me rends compte que vous devez alors appeler un autre natif de fonction permettant d'obtenir la valeur de retour de ce qui a été sélectionné et "faire quelque chose" avec cette information.

La raison pour laquelle je demande parce que j'ai un custom sélectionnez sélecteur qui est créé à l'aide de <ul> et <li> éléments, de sorte que la sélection/zone de liste déroulante est entièrement personnalisable, et je suis heureux avec la façon dont il fonctionne, mais sur les versions mobiles le long de la liste déroulante n'est pas aussi convivial que le natif de sélecteur.

InformationsquelleAutor Augie Gardner | 2013-01-23

1

Vous pouvez utiliser un peu de Javascript (bibliothèque comme Mobiscroll; checkout leur démo.

Veuillez noter Mobiscroll services sont gratuits pour 15 jours seulement, afin de la tester.

InformationsquelleAutor Melvin Joseph Mani

Je sais que la question est assez vieux, mais j'ai juste fait du surplace au cours d'une même question.
Maintenant les navigateurs mobiles soutenir ceux natif éléments de contrôle sans la nécessité de JS (je ne suis pas sûr si les mobiles avaient le même soutien à l'an dernier).

Ce que vous pouvez faire est la suivante. Dans un premier temps vous créer une liste avec vos listes de sélection:
(bien sûr, il fonctionne avec une seule boîte de sélection ainsi)

 <ul>
    <li>
        <select class="dropdown" name="fruits">
            <option value="Bananas">Bananas</option>
            <option value="Oranges">Oranges</option>
            <option value="Apples">Apples</option>
            <option value="Pears">Pears</option>
        </select>
    </li>
    <li>
        <select class="dropdown" name="cities">
            <option value="Arizona">Arizona</option>
            <option value="California">California</option>
            <option value="Colorado">Colorado</option>
            <option value="Conneticut">Conneticut</option>
        </select>
    </li>
</ul>

Puis appliquer des styles personnalisés pour la faire ressembler à l'native de l'INTERFACE utilisateur:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown {
    border: 1;
    padding: 3px 5px;
    width: 100%;
    /* attach a custom background image */
    background: url('http://dummyimage.com/15x15/00ff40/000&text=^') no-repeat right     center #FFF;

    /* prevent the default small pointer from showing up */
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

Que c'est. Travail démonstration en direct sur JSBin (testé avec iOS 7, mais devrait fonctionner dans d'autres modernes navigateurs mobiles ainsi).

<select> ne fonctionne pas sur Android 4.4.2 lorsque utilisé dans WebView avec Phonegap

InformationsquelleAutor MilkmanMedia

Vous devez vous connecter pour publier un commentaire.