Lista de países html con banderas

Este grupo de redactores ha estado por horas buscando la respuesta a tus dudas, te compartimos la respuesta por esto esperamos serte de gran ayuda.

Solución:

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

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

1ra letra -> posición vertical
2ª letra -> posición horizontal

Ejemplos (para banderas de 16x11px + espaciado de 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

De esta forma, puedo calcular la ubicación de la bandera con una función muy sencilla en el lado del cliente sin necesidad de más de 200 definiciones de estilo adicionales.

Complemento jQuery de muestra:

(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 = default_size);

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

Uso de demostración:

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

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

Y aquí mi sprite de la bandera:

Nota para el futuro: el autocompletado de jQuery UI ahora es compatible con la representación personalizada de forma predeterminada, consulte http://api.jqueryui.com/autocomplete/#method-_renderItem.

Es bastante fácil. Cosas que necesitas:

1. jQuery UI autocompletado
2. Extensión html de autocompletar interfaz de usuario
3. Una lista de nombres/códigos de países
4. Un sprite CSS con todas las banderas

Recuerda, Google es tu amigo. Mezcle bien los ingredientes, mezcle con cuidado un poco de javascript y listo, en 7 líneas de código:

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

var countryNames = countries.map(function(country)
  return 
      label: '
'+country[0]+'
',
      value: country[0]
  
);

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

Aquí está este código en acción

Sección de Reseñas y Valoraciones

Puedes añadir valor a nuestro contenido colaborando tu veteranía en las referencias.

---

---

Utiliza Nuestro Buscador