Ciao a tutti,
Ho recuperato in rete uno script per selezionare la lingua che utilizzo con una pagina php. Funziona ma ha due piccoli bug con non sono in grado di correggere essendo quasi novizio in jquery:
1. la lingua e la bandiera selezionata rimangono sempre l'inglese anche se in realtà il cambio di lingua funziona per la pagina
2. vorrei poter visualizzare english, italiano, ecc.. .anziché UK, Italia, ecc...
Grazie anticipatamente a chi potrà aiutarmi o indirizzarmi verso un'altro script simile.
Ecco il mio codice html
e il mio scriptcodice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="scripts/languageswitcher.js"></script> <title>Untitled Document</title> <style type="text/css"> #country-select { position: absolute; top: 15px; right: 25px; width: 130px; } /* rought form styles for when JS is disabled */ #country-select form { width: 130px; padding: 0; } #country-select select, #country-select input { display: inline; padding: 0; margin: 0; } /* JS-created definition list */ .dropdown dd { position: relative; } .dropdown a { text-decoration: none; outline: 0; font: 12px Arial, Helvetica, sans-serif; display: block; width: 130px; overflow: hidden; } .dropdown dt a { background: #003466; border: 1px solid #000; padding: 3px 10px 4px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; } .dropdown dt a.active { background: #003466; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px dotted #676768; -moz-box-shadow: 0 3px 7px rgba(0,0,0,.5); -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5); box-shadow: 0 3px 7px rgba(0,0,0,.5); color: #fff; } .dropdown dd ul { border: 1px solid #676768; color: #fff; display: none; position: absolute; z-index: 999; top: 0; left: 0; padding: 2px 0 5px 0; list-style: none; border-top: none; margin: 0; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -moz-box-shadow: 0 3px 7px rgba(0,0,0,.5); -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5); box-shadow: 0 3px 7px rgba(0,0,0,.5); background-color: #003466; } .dropdown dd ul li a { padding: 2px 10px; } .dropdown dd ul li a span, .dropdown dt a span { float: left; width: 16px; height: 11px; margin: 2px 6px 0 0; background-image: url(../images/flags.png); background-repeat: no-repeat; cursor: pointer; } .uk a span { background-position: 0 0 } .fr a span { background-position: -16px 0 } .it a span { background-position: -32px 0 } .es a span { background-position: -48px 0 } .de a span { background-position: -64px 0 } .dropdown dd ul li a em, .dropdown dt a em { font-style: normal; float: left; width: 100px; cursor: pointer; } .dropdown dd ul li a em { color: #fff; } .dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); } .dropdown dd ul li a:hover em { color: #fff; } </style></head> <body> <div id="help"><div id="country-select"> <form action=""> <select id="country-options" name="country-options"> <option selected="selected" title="index.php?lang=uk" value="uk">English</option> <option title="index.php?lang=fr" value="fr">français</option> <option title="index.php?lang=it" value="it">italiano</option> </select> <input value="Select" type="submit" /> </form> </div> </div> </body> </html>
codice:$(document).ready(function() { // --- language dropdown --- // // turn select into dl createDropDown(); var $dropTrigger = $(".dropdown dt a"); var $languageList = $(".dropdown dd ul"); // open and close list when button is clicked $dropTrigger.toggle(function() { $languageList.slideDown(200); $dropTrigger.addClass("active"); }, function() { $languageList.slideUp(200); $(this).removeAttr("class"); }); // close list when anywhere else on the screen is clicked $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $languageList.slideUp(200); $dropTrigger.removeAttr("class"); }); // when a language is clicked, make the selection and then hide the list $(".dropdown dd ul li a").click(function() { var clickedValue = $(this).parent().attr("class"); var clickedTitle = $(this).find("em").html(); $("#target dt").removeClass().addClass(clickedValue); $("#target dt em").html(clickedTitle); $languageList.hide(); $dropTrigger.removeAttr("class"); }); }); // actual function to transform select to definition list function createDropDown(){ var $form = $("div#country-select form"); $form.hide(); var source = $("#country-options"); source.removeAttr("autocomplete"); var selected = source.find("option:selected"); var options = $("option", source); $("#country-select").append('<dl id="target" class="dropdown"></dl>') $("#target").append('<dt class="' + selected.val() + '"><span class="flag"></span>' + selected.text() + '</dt>') $("#target").append('<dd><ul>[/list]</dd>') options.each(function(){ $("#target dd ul").append('<li class="' + $(this).val() + '"><span class="flag"></span>' + $(this).text() + ''); }); }
Rispondi quotando
