Elenco dei paesi HTML con bandiere [chiuso]

Question

Sto cercando un modo per selezionare e visualizzare un elenco di paesi, preferibilmente con le bandiere.Qualche suggerimento?

Ho iniziato provando questo plugin jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , ma poiché l'elenco dei paesi che ho è piuttosto ampio, si è scoperto che le prestazioni erano davvero pessime (troppe richieste http alle immagini).Anche l'elenco è ingombrante quando è più grande di 50 elementi.

Answer 1

Nota dal futuro: il completamento automatico dell'interfaccia utente jQuery ora supporta la personalizzazione rendering per impostazione predefinita, vedere http://api.jqueryui.com/autocomplete/#method-_renderItem .

È abbastanza facile. Cose di cui hai bisogno:

1. completamento automatico dell'interfaccia utente jQuery
2. Completamento automatico dell'interfaccia utente estensione html
3. A elenco di nomi / codici di paesi
4. Uno sprite CSS con tutti i flag

Ricorda, Google è tuo amico. Mescola bene gli ingredienti, aggiungi con attenzione un po 'di javascript ed è fatto - in 7 righe di codice:

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

Ecco questo codice in azione

Answer 2

Volevo solo suggerire un modo più intelligente (imho) di eseguire lo sprite delle bandiere.

L'idea è di salvare le bandiere in una griglia in base al codice iso2 del paese.

1a lettera -> posizione verticale
2a lettera -> posizione orizzontale

Esempi (per flag 16x11px + spaziatura 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

In questo modo posso calcolare la posizione della bandiera con una funzione molto semplice sul lato client senza la necessità di oltre 200 definizioni di stile aggiuntive.

Esempio di plug-in 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);

Utilizzo della demo:

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

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

E qui il mio sprite di bandiera:

Answer 3

Come menzionato dai commentatori, uno sprite CSS è la soluzione corretta qui. Fortunatamente, ci sono molti sprite CSS di flag disponibili gratuitamente . Questo sembra piuttosto buono.

Dovremo modificare il codice a discesa per adattarsi a quello sprite CSS predefinito. Sono andato avanti e l'ho fatto per te. Ecco una demo dal 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; }

Le modifiche CSS che ho apportato erano hack di domande e risposte; probabilmente vorrai passare un po 'di tempo a lucidarli. Ho rimosso tutto il materiale specifico per flag da languageswitcher.css poiché stiamo utilizzando flag16.css .

Inoltre, se il codice del paese non esiste nello sprite CSS, il flag visualizzato per impostazione predefinita sarà La bandiera dell'Unione africana poiché è la prima immagine nello sprite. Nella demo, molti dei paesi nel mio elenco di esempio non hanno un'immagine sprite. Attento a questo.

Answer 4

Ecco un file con l'elenco dei paesi e i collegamenti alle loro bandiere (alcuni collegamenti potrebbero non funzionare, ma la maggior parte lo è) File Excel

Answer 5

Puoi anche utilizzare i flag di http://www.famfamfam.com/lab/icons/ flags / e usa semplicemente CSS per posizionare il flag appropriato.

---- MODIFICATO ----

Se devo mostrare la bandiera del mio paese, farei la mappatura da CSS come

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

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