HTML-Länderliste mit Flags [geschlossen]

Question

Ich suche nach einer Möglichkeit, eine Liste von Ländern auszuwählen und anzuzeigen, vorzugsweise mit Flaggen.Irgendwelche Vorschläge?

Ich habe zunächst dieses jQuery-Plugin http://www.graphicpush.com/website-language ausprobiert-dropdown-with-jquery , aber da die Liste der Länder, die ich habe, ziemlich groß ist, stellte sich heraus, dass die Leistung wirklich schlecht war (zu viele http-Anfragen an Bilder).Die Liste ist auch umfangreich, wenn sie größer als 50 Elemente ist.

Answer 1

Hinweis aus der Zukunft: Die automatische Vervollständigung der jQuery-Benutzeroberfläche unterstützt jetzt benutzerdefinierte Funktionen Standardmäßig wird gerendert, siehe http://api.jqueryui.com/autocomplete/#method-_renderItem .

Es ist ziemlich einfach. Dinge, die Sie brauchen:

1. automatische Vervollständigung der jQuery-Benutzeroberfläche
2. Benutzeroberfläche wird automatisch vervollständigt HTML-Erweiterung
3. A Liste der Ländernamen / -codes
4. Ein CSS-Sprite mit allen Flags

   Denken Sie daran, Google ist Ihr Freund. Mischen Sie die Zutaten gut, verquirlen Sie vorsichtig etwas Javascript und fertig - in 7 Codezeilen:

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

   Hier ist dieser Code in Aktion

Answer 2

Ich wollte nur eine (imho) intelligentere Methode für das Flags-Sprite vorschlagen.

Die Idee ist, die Flags in einem Raster gemäß dem iso2-Code des Landes zu speichern.

1. Buchstabe -> vertikale Position
2. Buchstabe -> horizontale Position

Beispiele (für 16x11px-Flags + 4x4px-Abstand):

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

Auf diese Weise kann ich die Flaggenposition mit einer sehr einfachen Funktion auf der Clientseite berechnen, ohne dass mehr als 200 zusätzliche Stildefinitionen erforderlich sind.

Beispiel für ein 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);

Demo-Nutzung:

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

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

Und hier mein Flaggensprite:

Answer 3

Wie von Kommentatoren erwähnt, ist hier ein CSS-Sprite die richtige Lösung. Glücklicherweise gibt es viele frei verfügbare CSS-Sprites von Flags . Dieser sieht ziemlich gut aus.

Wir müssen den Dropdown-Code anpassen, um das vorgefertigte CSS-Sprite aufzunehmen. Ich habe das für dich getan. Hier ist eine Live-Demo.

langwageswitcher.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>');
            });
    }

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

Die CSS-Änderungen, die ich vorgenommen habe, waren Q & D-Hacks; Sie werden wahrscheinlich einige Zeit damit verbringen wollen, sie zu polieren. Ich habe alle flaggenspezifischen Inhalte aus Languageswitcher.css entfernt, da wir flag16.css .

Wenn der Ländercode im CSS-Sprite nicht vorhanden ist, lautet das angezeigte Flag standardmäßig Die Flagge der Afrikanischen Union, da es das erste Bild im Sprite ist. In der Demo haben einige der Länder in meiner Beispielliste kein Sprite-Image. Achten Sie darauf.

Answer 4

Hier ist eine Datei mit der Liste der Länder und Links zu ihren Flaggen (einige der Links funktionieren möglicherweise nicht, die meisten jedoch) Excel-Datei

Answer 5

Sie können auch Flags von http://www.famfamfam.com/lab/icons verwenden/ flags / und verwenden Sie einfach CSS, um das entsprechende Flag zu positionieren.

---- BEARBEITET ----

Wenn ich die Flagge meines Landes zeigen muss, würde ich Mapping von CSS wie machen

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

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