带有标志的Html国家列表

Question

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

我开始尝试这个jQuery插件http://www.graphicpush.com/website-language-dropdown-with-jquery,但由于我所拥有的国家列表相当大,结果表明性能非常糟糕(也是许多http请求图像).当大于50个元素时,列表也很笨重.

Answer 1

只是想建议一个(imho)更聪明的做标志精灵的方法.

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

未来的注意事项:jQuery UI自动完成现在默认支持自定义呈现,请参阅 http://api.jqueryui.com/autocomplete/#method-_renderItem.

这很容易.你需要的东西:

1. jQuery UI自动完成
2. UI自动完成html扩展
3. 一个国家的名称/代码列表
4. 一个CSS精灵与全旗

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

这是代码的实际应用