Список стран в формате HTML с флагами [закрыто]

StackOverflow https://stackoverflow.com/questions/5409780

  •  29-10-2019
  •  | 
  •  

Вопрос

Я ищу способ выбрать и отобразить список стран, желательно с флагами.Есть предложения?

Я начал с того, что попробовал этот плагин jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , но поскольку список стран у меня довольно большой, оказалось, что производительность была очень плохой (слишком много HTTP-запросов к изображениям).Кроме того, список становится громоздким, если он превышает 50 элементов.

Это было полезно?

Решение

<цитата>

Примечание из будущего: автозаполнение пользовательского интерфейса jQuery теперь поддерживает настраиваемые рендеринг по умолчанию, см. http://api.jqueryui.com/autocomplete/#method-_renderItem .

Это довольно просто. Что вам нужно:

  1. автозаполнение пользовательского интерфейса jQuery
  2. Автозаполнение пользовательского интерфейса html расширение
  3. A список названий / кодов стран
  4. 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>

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top