Html Lista de países con flags

Question

Estoy buscando una manera de seleccionar y mostrar una lista de países, preferiblemente con banderas. ¿Alguna sugerencia?

empecé por tratar de este plugin jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery, pero a medida que la lista de países que tengo es bastante grande Resultó que el rendimiento era muy malo (demasiadas peticiones http a las imágenes). Además, la lista es voluminosa cuando tiene más de 50 elementos.

Answer 1

Nota del futuro: autocompletar jQuery UI apoya ahora la costumbre renderizado por defecto, ver http://api.jqueryui.com/autocomplete/#method-_renderItem.

Es bastante fácil. Cosas que necesita:

1. jQuery UI auto-complete
2. UI auto-complete html extension
3. Un list of country names/codes
4. Un CSS sprite with all flags

Recuerde, Google es tu amigo. Mezclar bien los ingredientes, mezclar cuidadosamente algunos javascript en, y está hecho - en 7 líneas 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 
}); 

Here's this code in action

Answer 2

Aquí es un archivo con la lista de países y enlaces a sus banderas (algunos de los enlaces no funcione, pero aunque la mayoría de ellos son) Excel File

Answer 3

Como se ha mencionado por los comentaristas, un sprite CSS es el correcto solución aquí. Afortunadamente, there are many CSS sprites of flags freely available. This one se ve bastante bien.

Tendremos que ajustar el código desplegable para acomodar ese sprite CSS prefabricado. He seguido adelante y he hecho eso por ti. Here's a live demo.

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

Los cambios de estilo CSS que hice fueron Q & hacks D; es probable que desee pasar un tiempo puliéndolos. Eliminé todas las cosas específicas de la bandera de languageswitcher.css ya que estamos usando flag16.css.

Además, si el código de país no existe en el sprite de CSS, la bandera mostrada será la bandera de la Unión Africana http://www.veryicon.com/icon/16/Flag/Country%20Flags/African%20Union%20Flag.png por defecto, ya que es la primera imagen en el sprite. En la demostración, varios de los países en mi lista de ejemplos no tienen una imagen de sprite. Ten cuidado con eso.

Answer 4

Sólo quería sugerir una (en mi humilde opinión) forma más inteligente de hacer las banderas sprite.

La idea es guardar los indicadores en una cuadrícula según el código iso2 del país.

primera carta -> posición vertical
segunda carta -> posición horizontal

ejemplos (por 16x11px banderas + 4x4px espaciado):

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 

este modo puede calcular la ubicación, marca con una muy función fácil en el lado del cliente sin la necesidad de más de 200 definiciones de estilo.

Muestra jQuery plugin:

(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 Demostración:

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

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

Y aquí mi bandera de sprites:

Answer 5

También puede usar flags desde http://www.famfamfam.com/lab/icons/flags/ y simplemente usar CSS para ubicar el indicador apropiado.

---- ---- EDITADO

Si tengo que mostrar la bandera de mi país, entonces yo haría mapeo de CSS como

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

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