web-dev-qa-db-fra.com

Liste de pays HTML avec drapeaux

Je cherche un moyen de sélectionner et d'afficher une liste de pays, de préférence avec des drapeaux. Aucune suggestion?

J'ai commencé par essayer ce plugin jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , mais comme la liste des pays que j'ai est assez grande, il s'est avéré que les performances étaient vraiment mauvaises (trop de requêtes http pour les images). De plus, la liste est volumineuse lorsqu'elle est supérieure à 50 éléments.

javascripthtmlcountry
22
Mr.B

Note du futur: la saisie automatique jQuery UI prend désormais en charge le rendu personnalisé par défaut, voir http://api.jqueryui.com/autocomplete/#method-_renderItem .

C'est assez simple. Choses dont tu as besoin:

  1. jQuery UI auto-complete
  2. extension html d'auto-complétion de l'interface utilisateur
  3. A liste des noms/codes de pays
  4. A CSS Sprite avec tous les drapeaux

N'oubliez pas que Google est votre ami. Mélangez bien les ingrédients, fouettez soigneusement du javascript, et c'est fait - en 7 lignes de code:

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

Voici ce code en action

31
Ricardo Tomasi

Je voulais juste suggérer une façon (imho) plus intelligente de faire les drapeaux Sprite.

L'idée est de sauvegarder les drapeaux dans une grille selon le code iso2 du pays.

1ère lettre -> position verticale
2e lettre -> position horizontale

Exemples (pour drapeaux 16x11px + espacement 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 cette façon, je peux calculer l'emplacement du drapeau avec une fonction très simple du côté client sans avoir besoin de plus de 200 définitions de style supplémentaires.

Exemple de plugin 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);

Utilisation de la démo:

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

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

Et voici mon drapeau Sprite:

enter image description here

34
roberkules

Comme mentionné par les commentateurs, un Sprite CSS est la bonne solution ici. Heureusement, il existe de nombreux sprites CSS de drapeaux disponibles gratuitement . Celui-ci semble assez bon.

Nous devrons ajuster le code déroulant pour accueillir ce Sprite CSS pré-fait. Je suis allé de l'avant et je l'ai fait pour vous. Voici une démo en direct.

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

Les modifications CSS que j'ai apportées étaient des hacks Q&D; vous voudrez probablement passer un peu de temps à les polir. J'ai supprimé tous les éléments spécifiques au drapeau de languageswitcher.css car nous utilisons flag16.css .

De plus, si le code de pays n'existe pas dans le Sprite CSS, le drapeau affiché sera par défaut le  Drapeau de l'Union africaine puisqu'il s'agit de la première image du Sprite. Dans la démo, plusieurs des pays de ma liste d'exemples n'ont pas d'image Sprite. Attention à ça.

1
josh3736

Voici un fichier avec la liste des pays et des liens vers leurs drapeaux (certains des liens peuvent ne pas fonctionner, mais la plupart le sont) Fichier Excel

0
Pepe

Vous pouvez également utiliser des indicateurs de http://www.famfamfam.com/lab/icons/flags/ et simplement utiliser CSS pour positionner l'indicateur approprié.

----ÉDITÉ----

Si je dois montrer le drapeau de mon pays, je ferais une cartographie à partir de CSS comme

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

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

0
Anil