带标志的 Html 国家列表

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，描述问题以及到目前为止已采取的解决措施。

10 年前已关闭。

Answer 1

只是想建议一种（恕我直言）更聪明的方法来制作标志精灵。

这个想法是根据国家 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/rorkules/TxAhb/

这里是我的标志精灵：

Answer 2

未来注意事项：jQuery UI 自动完成现在支持自定义
默认渲染，参见
http://api.jqueryui.com/autocomplete/#method-_renderItem。< /p>

这很容易。你需要的东西：

1. jQuery UI 自动完成
2. UI 自动完成 html 扩展
3. A 国家/地区名称/代码列表
4. A < a href="https://github.com/lafeber/world-flags-sprite" rel="noreferrer">带有所有标志的 CSS sprite

请记住，Google 是您的朋友。将成分充分混合，小心地加入一些 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
});

这是正在运行的代码< /a>

Answer 3

正如评论者所提到的，CSS 精灵是这里的正确解决方案。幸运的是，有许多免费的 CSS 标志精灵。 这个看起来相当不错。

我们必须调整下拉代码以适应预制的 CSS 精灵。我已经为你做了这件事。 这是一个现场演示。

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

我所做的 CSS 更改是 Q&D hack；您可能需要花一些时间来完善它们。我从 languageswitcher.css 中删除了所有特定于标志的内容，因为我们使用 flag16.css。

此外，如果 CSS 精灵中不存在国家/地区代码，则显示的标志将默认为
非洲联盟的旗帜，因为它是精灵中的第一张图像。在演示中，我的示例列表中的几个国家/地区没有精灵图像。小心这一点。

Answer 4

这是一个包含国家/地区列表及其国旗链接的文件（尽管有些链接可能无法正常工作，但大多数都可以）
Excel 文件

Answer 5

您还可以使用 http://www.famfamfam.com/lab/icons/flags/ 中的标志 并简单地使用 CSS 来定位适当的标志。

----编辑----

如果我需要显示我的国家的国旗，那么我会从 CSS 进行映射，例如

.np {
背景：url(./flags_preview_large.png) -172px -397px no-repeat;
宽度：14px;
高度：20px;
<代码>}