झंडे के साथ एचटीएमएल देश सूची

Question

मैं देशों की सूची चुनने और प्रदर्शित करने का एक तरीका ढूंढ रहा हूं, अधिमानतः झंडे के साथ। कोई सुझाव?

मैंने इस jQuery प्लगइन http://www.graphicpush.com/website-language-dropdown-with-jquery को आजमाकर शुरू किया, लेकिन मेरे देशों की सूची काफी बड़ी है, यह पता चला कि प्रदर्शन वास्तव में खराब था (छवियों के लिए बहुत से http अनुरोध)। यह भी भारी है जब यह 50 तत्वों से बड़ा है।

Answer 1

नोट: jQuery यूआई स्वत: पूर्ण अब कस्टम डिफ़ॉल्ट रूप से प्रतिपादन का समर्थन करता है, 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

याद रखें, गूगल अपने दोस्त है। सामग्री अच्छी तरह ब्लेंड, ध्यान में कुछ जावास्क्रिप्ट whisk, और यह किया है - कोड के 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

टिप्पणीकर्ताओं द्वारा उल्लेख किया है, एक सीएसएस स्प्राइट उचित है यहां समाधान सौभाग्य से, there are many CSS sprites of flags freely available। This one बहुत अच्छा लग रहा है।

हमें पूर्व-निर्मित सीएसएस स्प्राइट को समायोजित करने के लिए ड्रॉपडाउन कोड को ट्विक करना होगा। मैं आगे बढ़ गया हूं और आपके लिए यह किया है। 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; } 

मैं क्यू & डी हैक्स थे सीएसएस परिवर्तन, आप शायद उन्हें पॉलिश करने में कुछ समय बिताना चाहेंगे। मैंने languages ​​विचलन सीएसएस से सभी ध्वज-विशिष्ट सामग्री को हटा दिया है क्योंकि हम flag16.css का उपयोग कर रहे हैं।

इसके अलावा, यदि देश कोड सीएसएस स्प्राइट में मौजूद नहीं है, तो दिखाया गया ध्वज http://www.veryicon.com/icon/16/Flag/Country%20Flags/African%20Union%20Flag.png अफ्रीकी संघ का ध्वज डिफ़ॉल्ट होगा क्योंकि यह स्प्राइट में पहली छवि है। डेमो में, मेरी उदाहरण सूची में से कई देशों में एक स्प्राइट छवि नहीं है। इसके लिए बाहर देखो।

भविष्य से

Answer 4

बस एक (imho) झंडे प्रेत करने का बेहतर तरीका सुझाने के लिए करना चाहता था।

विचार आईएसओ 2 कोड के अनुसार ग्रिड में झंडे को सहेजना है।

1 पत्र -> ऊर्ध्वाधर स्थिति
2 पत्र -> क्षैतिज स्थिति

उदाहरण (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/ से झंडे का भी उपयोग कर सकते हैं और उचित ध्वज को पोजिशन करने के लिए बस सीएसएस का उपयोग कर सकते हैं।

---- संपादित ----

मुझे अपने देश का झंडा दिखाने की जरूरत है, तो मैं

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

.np {
background: url(./flags_preview_large.png) -172px -397px no-repeat;
width: 14px;
तरह सीएसएस से मानचित्रण करना होगा height: 20px;
}