javascript - tag - title html w3schools

Html Lista de países con banderas (5)

Estoy buscando una manera de seleccionar y mostrar una lista de países, preferiblemente con banderas. ¿Alguna sugerencia?

Comencé probando este complemento de jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery , pero como la lista de países que tengo es bastante grande, resultó que el rendimiento era realmente malo (también muchas peticiones http a imagenes). Además, la lista es voluminosa cuando tiene más de 50 elementos.

Nota del futuro: jQuery UI autocomplete ahora admite la representación personalizada de forma predeterminada, consulte http://api.jqueryui.com/autocomplete/#method-_renderItem .

Es bastante facil Cosas que necesitas:

Recuerda, Google es tu amigo. Mezcla bien los ingredientes, bate cuidadosamente algunos javascript y listo, en 7 líneas de código:

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

Aquí está este código en acción

Aquí hay un archivo con la lista de países y enlaces a sus banderas (aunque algunos de los enlaces no funcionen, pero la mayoría sí lo están) Archivo de Excel

Como mencionaron los comentaristas, un sprite CSS es la solución adecuada aquí. Afortunadamente, hay muchos sprites CSS de banderas disponibles gratuitamente . Este se ve bastante bien.

Tendremos que ajustar el código desplegable para acomodar ese sprite CSS pre-hecho. He seguido adelante y hecho eso por ti. Aquí hay una demostración en vivo.

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="#">'' + selected.text() + ''</a></dt>'') - $("#target").append(''<dd><ul></ul></dd>'') + $("#country-select").append(''<dl id="target" class="dropdown f16"></dl>'') + $("#target").append(''<dt><a href="#">'' + selected.text() + ''</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") + ''">'' + $(this).text() + ''</a></li>''); + $drop.append(''<li><a href="'' + $(this).attr("title") + ''">'' + $(this).text() + ''</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; }

Los cambios de CSS que hice fueron hacks Q&D; Probablemente querrás pasar un tiempo puliéndolos. flag16.css todas las cosas específicas de la bandera de languageswitcher.css ya que estamos usando flag16.css .

Además, si el código de país no existe en el sprite CSS, la bandera que se muestra aparecerá de forma predeterminada en http://www.veryicon.com/icon/16/Flag/Country%20Flags/African%20Union%20Flag.png African La bandera de la Unión ya que es la primera imagen en el sprite. En la demostración, varios de los países en mi lista de ejemplos no tienen una imagen de sprite. Cuidado con eso.

Solo quería sugerir una forma inteligente de hacer el sprite de las banderas.

La idea es guardar las banderas en una cuadrícula de acuerdo con el código iso2 del país.

1ª letra -> posición vertical
2ª letra -> posición horizontal

Ejemplos (para indicadores de 16x11px + espaciado de 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 esta manera, puedo calcular la ubicación de la bandera con una función muy sencilla en el lado del cliente sin la necesidad de más de 200 definiciones de estilo adicionales.

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

Uso de la versión parcial de programa:

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

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

Y aquí mi bandera sprite:

También puede usar indicadores de http://www.famfamfam.com/lab/icons/flags/ y simplemente usar CSS para colocar el indicador adecuado.

---- EDITADO ----

Si necesito mostrar la bandera de mi país, entonces haría mapeo desde CSS como



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