Lista de países em HTML com sinalizadores [fechado]

Question

Estou procurando uma maneira de selecionar e exibir uma lista de países, de preferência com bandeiras.Alguma sugestão?

Comecei tentando este plugin jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , mas como a lista de países que tenho é muito grande, descobri que o desempenho era muito ruim (muitas solicitações de http para imagens).Além disso, a lista é volumosa quando tem mais de 50 elementos.

Answer 1

Nota do futuro: jQuery UI autocomplete agora oferece suporte personalizado renderização por padrão, veja http://api.jqueryui.com/autocomplete/#method-_renderItem .

É muito fácil. Coisas que você precisa:

1. preenchimento automático da IU do jQuery
2. preenchimento automático da IU extensão html
3. Um lista de nomes / códigos de países
4. Um sprite CSS com todos os sinalizadores

Lembre-se de que o Google é seu amigo. Misture bem os ingredientes, coloque cuidadosamente um pouco de javascript e pronto - em 7 linhas de código:

var countries = [["Argentina", "ar"], ...];

var countryNames = countries.map(function(country){
  return {
      label: '<div class="flag '+country[1].toLowerCase()+'">'+country[0]+'</div>',
      value: country[0]
  }
});

$('#country').autocomplete({
  source: countryNames,
  html: true
});

Aqui está este código em ação

Answer 2

Só queria sugerir uma maneira (imho) mais inteligente de fazer o sprite de bandeiras.

A ideia é salvar as bandeiras em uma grade de acordo com o código iso2 do país.

1ª letra -> posição vertical
2ª letra -> posição horizontal

Exemplos (para sinalizadores de 16x11px + espaçamento 4x4px):

Austria = AT
A = 1   => vertically 1st row       => y = (1-1)*(11+4)  = 0
T = 20  => horizontally 20th column => x = (20-1)*(16+4) = 380

United States = US
U = 21  => vertically 21st row      => y = (21-1)*(11+4) = 300
S = 19  => horizontally 19th column => x = (19-1)*(16+4) = 360

Desta forma, posso calcular a localização da bandeira com uma função muito fácil do lado do cliente, sem a necessidade de mais de 200 definições de estilo extras.

Exemplo de plugin jQuery:

(function($) {
    // size = flag size + spacing
    var default_size = {
        w: 20,
        h: 15
    };

    function calcPos(letter, size) {
        return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
    }

    $.fn.setFlagPosition = function(iso, size) {
        size || (size = default_size);

        return $(this).css('background-position',
            [calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
    };
})(jQuery);

Uso de demonstração:

$('.country i').setFlagPosition('es');

http://jsfiddle.net/roberkules/TxAhb/

E aqui está o meu sprite de bandeira:

Answer 3

Conforme mencionado pelos comentadores, um sprite CSS é a solução adequada aqui. Felizmente, existem muitos CSS sprites de sinalizadores disponíveis gratuitamente . Este parece muito bom.

Teremos que ajustar o código suspenso para acomodar aquele sprite CSS pré-fabricado. Eu fui em frente e fiz isso por você. Aqui está uma demonstração ao vivo.

<✓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; }

As alterações de CSS que fiz foram hacks de perguntas e respostas; você provavelmente vai querer gastar algum tempo polindo-os. Removi todo o material específico da bandeira de languageswitcher.css, pois estamos usando flag16.css .

Além disso, se o código do país não existir no sprite CSS, a bandeira exibida será o padrão para Bandeira da União Africana por ser a primeira imagem do sprite. Na demonstração, vários dos países na minha lista de exemplos não têm uma imagem de sprite. Cuidado com isso.

Answer 4

Aqui está um arquivo com a lista de países e links para suas bandeiras (alguns dos links podem não estar funcionando, mas a maioria deles está) Arquivo Excel

Answer 5

Você também pode usar sinalizadores de http://www.famfamfam.com/lab/icons/ flags / e simplesmente use CSS para posicionar o sinalizador apropriado.

---- EDITADO ----

Se eu precisar mostrar a bandeira do meu país, eu faria um mapeamento de CSS como

<span class='np'></span>

.np {
background: url(./flags_preview_large.png) -172px -397px no-repeat;
width: 14px;
height: 20px;
}