Список стран в формате HTML с флагами [закрыто]
-
29-10-2019 - |
Вопрос
Я ищу способ выбрать и отобразить список стран, желательно с флагами.Есть предложения?
Я начал с того, что попробовал этот плагин jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , но поскольку список стран у меня довольно большой, оказалось, что производительность была очень плохой (слишком много HTTP-запросов к изображениям).Кроме того, список становится громоздким, если он превышает 50 элементов.
Решение
Примечание из будущего: автозаполнение пользовательского интерфейса jQuery теперь поддерживает настраиваемые рендеринг по умолчанию, см. http://api.jqueryui.com/autocomplete/#method-_renderItem .
Это довольно просто. Что вам нужно:
- автозаполнение пользовательского интерфейса jQuery
- Автозаполнение пользовательского интерфейса html расширение
- A список названий / кодов стран
- CSS-спрайт со всеми флагами
Помните, Google - ваш друг. Хорошо перемешайте ингредиенты, аккуратно добавьте немного JavaScript, и все готово - в 7 строках кода:
общийДругие советы
Просто хотел предложить (имхо) более умный способ создания спрайта флагов.
Идея состоит в том, чтобы сохранить флаги в сетке в соответствии с кодом страны iso2.
1-я буква -> вертикальное положение
2-я буква -> горизонтальное положение
Примеры (для флагов 16x11px + интервал 4x4px):
общийТаким образом, я могу вычислить расположение флага с помощью очень простой функции на стороне клиента без необходимости в 200+ дополнительных определениях стилей.
Пример плагина jQuery:
общийИспользование демо:
общийhttp://jsfiddle.net/roberkules/TxAhb/
А вот и спрайт моего флага:
Как упоминалось комментаторами, спрайт CSS здесь является правильным решением. К счастью, имеется множество свободно доступных CSS-спрайтов флагов . Этот выглядит неплохо.
Нам нужно будет настроить раскрывающийся код, чтобы он соответствовал готовому CSS-спрайту. Я пошел вперед и сделал это за вас. Вот живая демонстрация.
<▪languageswitcher.js общий
<▪languageswitcher.css общий
Изменения CSS, которые я сделал, касались вопросов и ответов; вы, вероятно, захотите потратить некоторое время на их полировку. Я удалил все специфические для флагов вещи из languageswitcher.css, поскольку мы используем flag16.css .
Кроме того, если код страны не существует в спрайте CSS, показанный флаг будет по умолчанию на Флаг Африканского Союза, так как это первое изображение в спрайте. В демонстрации некоторые страны в моем списке примеров не имеют изображения спрайта. Остерегайтесь этого.
Вот файл со списком стран и ссылками на их флаги (хотя некоторые ссылки могут не работать, но большинство из них работают) файл Excel
Вы также можете использовать флаги из http://www.famfamfam.com/lab/icons/ flags / и просто используйте CSS для размещения соответствующего флага.
---- ОТредактировано ----
Если мне нужно показать флаг моей страны, я бы сделал отображение из CSS, например
генерировать кодовый код
сгенерировать кодовый код
сгенерировать кодовый код
сгенерировать кодовый код
сгенерировать кодовый код
<span class='np'></span>