帶國旗的Html國家列表

Question

我正在尋找一種方法來選擇和顯示國家列表，最好是帶有標誌。有什麼建議麼？

我開始嘗試使用這個jQuery插件http://www.graphicpush.com/website-language-dropdown-with-jquery，但由於我所在的國家/地區列表非常龐大，因此性能非常糟糕（對圖像的http請求過多）。此外，當它大於50個元素時，該列表是龐大的。

Answer 1

注：jQuery UI的自動完成功能現在支持定製渲染 默認情況下，看到 http://api.jqueryui.com/autocomplete/#method-_renderItem。

這很容易。你需要的東西：

1. jQuery UI auto-complete
2. UI auto-complete html extension
3. 一個list of country names/codes
4. 一個CSS sprite with all flags

記住，谷歌是你的朋友。混合配料好，仔細地拂在一些JavaScript，它完成 - 7行代碼：

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

Here's this code in action

Answer 2

下面是與國家和鏈接到他們的標誌列表中的文件（有些鏈接可能無法雖然工作，但其中大部分是） Excel File

Answer 3

正如評論者提到的，CSS精靈是正確的在這裏解決。幸運的是，there are many CSS sprites of flags freely available。 This one看起來不錯。我們將不得不調整下拉代碼以適應預先製作的CSS sprite。我已經爲你做了。 Here's a live demo.

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

我提出了Q & d黑客的CSS的變化;你可能會想花一些時間來打磨它們。由於我們使用flag16.css，因此我從languageswitcher.css中刪除了所有特定於旗幟的內容。

而且，如果國家代碼不會在CSS精靈的存在，表示將默認爲http://www.veryicon.com/icon/16/Flag/Country%20Flags/African%20Union%20Flag.png非洲聯盟的標誌，因爲它是在精靈的第一個圖像的標誌。在演示中，我的示例列表中的一些國家/地區沒有sprite圖像。小心那個。從未來

Answer 4

只是想提出一個（恕我直言）做標誌雪碧更聰明的方式。

這個想法是根據國家iso2代碼在網格中保存標誌。

第一字母 - >垂直位置
第二信 - >水平位置

示例（16x11px標誌+ 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 

這樣我可以用非常計算的標誌位置簡單的功能在客戶端而不需要200多個額外的樣式定義。

樣品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); 

演示使用方法：

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

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

在這裏，我旗精靈：

Answer 5

您也可以使用http://www.famfamfam.com/lab/icons/flags/的標誌，並簡單地使用CSS定位適當的標誌。

---- ---- EDITED

如果我需要證明我的國家的標誌，那麼我會做的CSS映射像

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

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