Как упоминалось комментаторами, спрайт CSS здесь является правильным решением. К счастью, имеется множество свободно доступных CSS-спрайтов флагов. Этот выглядит неплохо.
Нам нужно будет настроить раскрывающийся код, чтобы он соответствовал готовому CSS-спрайту. Я пошел вперед и сделал это за вас. Вот живая демонстрация.
languageswitcher.js
@@ -44,10 +44,11 @@
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() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
- $("#target").append('<dd><ul></ul></dd>')
+ $("#country-select").append('<dl id="target" class="dropdown f16"></dl>')
+ $("#target").append('<dt><a href="#"><em class="flag ' + selected.val().toLowerCase() + '">' + selected.text() + '</em></a></dt>');
+ $("#target").append('<dd><ul></ul></dd>');
+ var $drop = $("#target dd ul");
options.each(function(){
- $("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
+ $drop.append('<li><a href="' + $(this).attr("title") + '"><em class="flag ' + $(this).val().toLowerCase() + '">' + $(this).text() + '</em></a></li>');
});
}
languageswitcher.css
@@ -45,6 +45,8 @@
.dropdown dd { position: relative; }
+.dropdown ul { max-height:350px; overflow-y:auto; overflow-x:hidden; }
+
.dropdown a {
text-decoration: none;
outline: 0;
@@ -52,6 +54,7 @@
display: block;
width: 130px;
overflow: hidden;
+ white-space:nowrap;
}
.dropdown dt a {
@@ -107,23 +110,6 @@
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(flags.png);
- background-repeat: no-repeat;
- cursor: pointer;
- }
-
- .us a span { background-position: 0 0 }
- .uk a span { background-position: -16px 0 }
- .fr a span { background-position: -32px 0 }
- .de a span { background-position: -48px 0 }
- .nl a span { background-position: -64px 0 }
-
.dropdown dd ul li a em,
.dropdown dt a em {
font-style: normal;
@@ -138,3 +124,5 @@
.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
.dropdown dd ul li a:hover em { color: #fff; }
+
+.flag { padding-left:18px; }
Изменения CSS, которые я сделал, касались вопросов и ответов; вы, вероятно, захотите потратить некоторое время на их полировку. Я удалил все специфичные для флагов вещи из languageswitcher.css, поскольку мы используем flag16.css.
Кроме того, если код страны не существует в спрайте CSS, показанный флаг будет по умолчанию установлен на флаг Африканского Союза, поскольку он первое изображение в спрайте. В демонстрации некоторые страны в моем списке примеров не имеют изображения спрайта. Остерегайтесь этого.
person
josh3736
schedule
23.03.2011
onchange
. Вы также можете использовать спрайт флага (подумайте о нескольких изображениях в одном) и вместо этого манипулируйтеbackground-position
. - person   schedule 23.03.2011