Lista de países HTML con banderas [cerrado]

Question

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

Empecé probando este complemento de jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , pero como la lista de países que tengo es bastante grande, resultó que el rendimiento fue realmente malo (demasiadas solicitudes http a imágenes).Además, la lista es voluminosa cuando tiene más de 50 elementos.

Answer 1

Nota del futuro: el autocompletado de la interfaz de usuario de jQuery ahora es compatible con renderizado por defecto, consulte http://api.jqueryui.com/autocomplete/#method-_renderItem .

Es bastante fácil. Cosas que necesita:

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

Recuerde, Google es su 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: '<div class="flag '+country[1].toLowerCase()+'">'+country[0]+'</div>',
      value: country[0]
  }
});

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

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

Answer 2

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

La idea es guardar las banderas en una cuadrícula de acuerdo con el código iso2 del país.

Primera letra -> posición vertical
Segunda 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 manera puedo calcular la ubicación de la bandera con una función muy fácil en el lado del cliente sin la necesidad de más de 200 definiciones de estilo adicionales.

Ejemplo de complemento de 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 demostración:

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

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

Y aquí mi objeto de bandera:

Answer 3

Como lo mencionaron los comentaristas, un sprite CSS es la solución adecuada aquí. Afortunadamente, hay muchos sprites CSS de banderas disponibles gratuitamente . Este se ve bastante bien.

Tendremos que modificar el código desplegable para acomodar ese sprite CSS prefabricado. Seguí adelante y lo hice por ti. Aquí tienes una demostración en 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; }

Los cambios de CSS que hice fueron trucos de Q & D; probablemente querrá pasar algún 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 CSS, la bandera que se muestra será predeterminada en Bandera de la Unión Africana ya que es la primera imagen del sprite. En la demostración, varios de los países de mi lista de ejemplo no tienen una imagen de sprite. Cuidado con eso.

Answer 4

Aquí hay un archivo con la lista de países y enlaces a sus banderas (aunque es posible que algunos de los enlaces no funcionen, pero la mayoría sí) Archivo de Excel

Answer 5

También puede utilizar banderas de http://www.famfamfam.com/lab/icons/ flags / y simplemente use CSS para posicionar la bandera apropiada.

---- EDITADO ----

Si necesito mostrar la bandera de mi país, haría un mapeo desde CSS como

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

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