带有标志的 Html 国家/地区列表 [关闭]

Posted 2023-04-18

【中文标题】带有标志的 Html 国家/地区列表 [关闭]

【英文标题】：Html Country List with flags [closed]

【发布时间】：2011-07-21 13:18:06

【问题描述】：

我正在寻找一种方法来选择和显示国家列表，最好带有标志。有什么建议吗？

我首先尝试了这个 jQuery 插件 http://www.graphicpush.com/website-language-dropdown-with-jquery，但由于我拥有的国家/地区列表非常大，结果证明性能非常糟糕（对图像的 http 请求太多）。当列表大于 50 个元素时，列表也会很庞大。

【问题讨论】：

你用谷歌搜索了吗？还是先尝试什么？我们不会为你做所有的工作：-p

见Writing the Perfect Question

也许尝试下载所有标志并使用批量图像转换器来减小它们的大小？

尝试使用国家名称填充选择元素，然后在触发onchange 事件时显示一个小标志图标。您还可以使用标志“精灵”（将多个图像合二为一）并操作 background-position。

我已经研究了 sprite 解决方案，但是将大约 80 个图像转换为 sprite 将是一项繁琐的工作。

【参考方案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/roberkules/TxAhb/

这里是我的旗帜精灵：

【讨论】：

优雅！十分优雅！！我希望大约一年前有这个解决方案:)

+1 是一个非常优雅的解决方案。

这是一个非常巧妙的解决方案

【参考方案2】：

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

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

jQuery UI auto-complete UI auto-complete html extension 一个list of country names/codes 一个CSS sprite with all flags

请记住，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
);

Here's this code in action

【讨论】：

太棒了！我没有搜索带有标志的精灵。现在我拥有了我需要的一切。非常感谢里卡多！

我非常喜欢这个答案，投了赞成票，但 jsbin 对我来说失败了

已为您修复 :) 它可能会在未来再次中断，因为它直接链接到第 3 方来源。

@RicardoTomasi，jsbin 代码没有准确显示标志。例如，孟加拉国的国旗显示在比利时旁边。

@IstiaqueAhmed 这个问题已经超过 1.5 年了。正如我上面所说，它会崩溃，因为它都是建立在第三方资源之上的。这次似乎精灵图像已更改（github.com/lafeber/world-flags-sprite/tree/master/images）。

【参考方案3】：

正如评论者所说，CSS sprite 是正确的解决方案。幸运的是，there are many CSS sprites of flags freely available。 This one 看起来不错。

我们将不得不调整下拉代码以适应预制的 CSS 精灵。我已经为你做了。 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; 

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

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

【讨论】：

感谢您精心设计的解决方案！一开始看这里的代码有点害怕，但是当我看到现场演示时，我发现它并没有想象中那么复杂。这次我选择了自动完成解决方案。但我会牢记这个解决方案，以备不时之需。再次感谢乔希！

@Mr.B：上面显示的代码只是一个udiff，这样可以很容易地看到我对您的link的原始代码所做的更改。

【参考方案4】：

这是一个包含国家列表及其国旗链接的文件（虽然有些链接可能不起作用，但大多数都可以） Excel File

【参考方案5】：

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

----已编辑----

如果我需要显示我的国家/地区的国旗，那么我会从 CSS 中进行映射，例如 <span class='np'></span>.np background: url(./flags_preview_large.png) -172px -397px no-repeat;width: 14px;height: 20px;

【讨论】：

添加一个例子会很有用。

好的，我添加了一个带有 html 标签（span 标签）的清晰示例，它借助上面定义的 CSS 映射显示尼泊尔地图。