Le bloc-notes professionnel d'un développeur front-end senior
Source: Is it possible to update the options of a component?. ATTENTION: le code d’illustration donnée dans l’issue Git est FAUX! Mais il m’a mis sur la bonne piste. Reportez-vous au code ci-dessous:
|
1 2 3 4 5 |
//init accordion component with options var accordion = UIkit.accordion(element, {collapse:true}); //change options on the fly accordion.collapse = false; |
Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.
|
1 2 3 4 5 6 7 8 |
<select id="resizing_select"> <option>All</option> <option>Longer</option> <option>A very very long string...</option> </select> <select id="width_tmp_select"> <option id="width_tmp_option"></option> </select> |
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#resizing_select').change(function(){ $("#width_tmp_option").html($('#resizing_select option:selected').text()); $(this).width($("#width_tmp_select").width()); }); }); |
|
1 2 3 4 5 6 7 |
#resizing_select { width: 50px; } #width_tmp_select{ display : none; } |
Source: Persist variables between page loads.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ACC.naosPagination.resizeSelectOnTheFly(); var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth'); $('#sortOptions1').width(sortOptionsWidth); sessionStorage.removeItem('sortOptionsWidth'); resizeSelectOnTheFly: function(){ $('#resizing_select').change(function(){ $("#width_tmp_option").html($('#resizing_select option:selected').text()); $(this).width($("#width_tmp_select").width()); var getWidth = ($('#resizing_select').width()) + 2; sessionStorage.setItem('sortOptionsWidth', getWidth+'px'); }); } |
Objectif: au choix de la langue via l’élément <select />, on redirige vers la page traduite.
Côté template, on boucle sur les langues disponibles. On stocke l’URL de la page de destination via l’attribut value de l’élément option.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="mobile-switchlanguage-block" tal:condition="switchArray"> <select name="switchlanguage" id="mobileSwitchlanguage" class="unstyled"> <tal:block tal:condition="not:lang/url" tal:define="lang currentLangInfos"> <option>${lang/label}</option> </tal:block> <tal:block tal:repeat="lang otherLangsInfos"> <option tal:condition="lang/url" tal:attributes="value lang/url;title lang/title">${lang/label}</option> </tal:block> </select> </div> |
En jQuery, on détecte un choix d’option via l’élément HTML <select />, on récupère la valeur de l’attribut value (l’URL de la page de destination) et on lance la redirection.
|
1 2 3 4 5 6 |
jQuery(document).ready(function(){ jQuery('#mobileSwitchlanguage').on('change', function(){ var getTargetPageURL = jQuery(this).val(); window.location.href = getTargetPageURL; }); }); |