Liste des pays HTML avec des drapeaux [fermé

StackOverflow https://stackoverflow.com/questions/5409780

  •  29-10-2019
  •  | 
  •  

Question

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é en essayant ce plugin jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery, mais comme la liste des pays que j'ai est assez importante, il s'est avéré que les performances étaient vraiment mauvaises (trop de demandes HTTP aux images). La liste est également encombrante lorsqu'elle est supérieure à 50 éléments.

Était-ce utile?

La solution

Remarque du futur: JQuery UI Assomple en prend en charge le rendu personnalisé par défaut, voir http://api.jqueryui.com/autocomplete/#Method-_renderItem.

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

  1. jQuery UI
  2. Extension HTML complét
  3. UN Liste des noms / codes de pays
  4. UN CSS Sprite avec tous les drapeaux

N'oubliez pas que Google est votre ami. Mélanger bien les ingrédients, fouetter soigneusement un 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

Autres conseils

Je voulais juste suggérer une façon plus intelligente (à mon humble avis) de faire le sprite des drapeaux.

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

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

Exemples (pour les 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 facile du côté client sans avoir besoin de 200+ définitions de style supplémentaire.

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émonstration:

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

http://jsfiddle.net/roberkules/txahb/

Et ici mon drapeau sprite:

enter image description here

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 Ça a l'air plutôt bien.

Nous devrons modifier le code déroulant pour accueillir ce sprite CSS pré-fait. Je suis allé de l'avant et j'ai fait ça 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 du temps à les polir. J'ai supprimé tous les trucs spécifiques au drapeau de LanguagesWitcher.css car nous utilisons drapeau16.css.

De plus, si le code du pays n'existe pas dans le sprite CSS, l'indicateur affiché par défaut Le drapeau de l'Union africaine car c'est la première image du sprite. Dans la démo, plusieurs des pays de ma liste d'exemples n'ont pas d'image de sprite. Attention à cela.

Voici un dossier avec la liste des pays et des liens vers leurs drapeaux (certains liens pourraient ne pas fonctionner, mais la plupart d'entre eux le sont)Fichier Excel

Vous pouvez également utiliser des drapeaux à partir de http://www.famfamfam.com/lab/icons/flags/ et utilisez simplement CSS pour positionner le drapeau approprié.

----ÉDITÉ----

Si j'ai besoin de montrer le drapeau de mon pays, je ferais la cartographie de CSS comme

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

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top