Source : Click through a DIV to underlying elements
Astuce utile lorsqu’on veut exploiter, sur périphériques mobiles et tactiles (smartphones, tablettes), le widget de l’élément de formulaire <select /> proposé nativement par les navigateurs.
Ci-dessous affichage dans un navigateur desktop vs. smartphone.
Attention : la partie javascript visant à changer le visuel du drapeau en fonction du choix de l’utilisateur ne fonctionne en l’état que si la page est entièrement rechargée.
On ne peut pas simuler le clic sur un élement <select /> en jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="mobileSwitchlanguage"> <label for="doSwitchLanguage" class="label-switchlanguage"> <i id="is-flag"></i> </label> <select id="doSwitchLanguage" name="mobile-switchlanguage" class="select-switchlanguage"> <option value="fr">Français</option> <option value="es">Español</option> <option value="it">Italiano</option> <option value="gb">English</option> </select> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#mobileSwitchlanguage { position: relative; } .label-switchlanguage { pointer-events: none; position: absolute; top: 0; left: left; } .select-switchlanguage { width: 18px; height: 10px; margin-top: 2px; } #is-flag { display: inline-block; width: 22px; height: 14px; } #is-flag.fr { background-image: url(img/fr.png); } #is-flag.es { background-image: url(img/es.png); } #is-flag.it { background-image: url(img/it.png); } #is-flag.gb { background-image: url(img/gb.png); } |
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function(){ // On récupère la valeur de l'attribut 'value' de l'élément <option /> pour l'affecter sous forme de classe à l'élément <label /> (pour afficher les différents drapeaux) var getDefaultOptionValue = jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').val(); jQuery('label[for="doSwitchLanguage"] #is-flag').addClass(getDefaultOptionValue); // Passée cette ligne, le code ci-dessous ne donnera pas de résultat. jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').on('click', function(){ var getOptionNewValue = jQuery(this).val(); jQuery('label[for="doSwitchLanguage"] #is-flag').removeClass().addClass(getOptionNewValue); }); }); |