HTML قائمة الدول مع الأعلام [مغلق]

Question

أنا أبحث عن طريقة لاختيار وعرض قائمة الدول، ويفضل أن تكون مع الأعلام.أي اقتراحات؟

لقد بدأت بتجربة هذا البرنامج المساعد jQuery http://www.graphicpush.com/website-language-dropdown-with-jquery, ، ولكن نظرًا لأن قائمة البلدان الموجودة لدي كبيرة جدًا، فقد تبين أن الأداء كان سيئًا للغاية (عدد كبير جدًا من طلبات http للصور).كما أن القائمة تكون ضخمة عندما تكون أكبر من 50 عنصرًا.

Answer 1

ملاحظة من المستقبل:مسج UI "الإكمال التلقائي" الآن يدعم مخصص التقديم بشكل افتراضي ، انظر http://api.jqueryui.com/autocomplete/#method-_renderItem.

فإنه من السهل جدا.أشياء تحتاج إليه:

1. مسج UI auto-complete
2. واجهة المستخدم لصناعة السيارات في استكمال امتداد html
3. A قائمة أسماء البلدان/رموز
4. A CSS sprite مع كل الأعلام

تذكر جوجل هو صديقك.تمزج المكونات جيدا ، بعناية خفقت بعض جافا سكريبت و يتم ذلك - في 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
});

هنا هذا الكود في العمل

Answer 2

أردت فقط اقتراح طريقة (imho) أكثر ذكاءً لعمل شبح الأعلام.

الفكرة هي حفظ الأعلام في شبكة وفقًا لرمز iso2 الخاص بالدولة.

الحرف الأول -> الوضع الرأسي
الحرف الثاني -> الوضع الأفقي

أمثلة (لأعلام 16 × 11 بكسل + تباعد 4 × 4 بكسل): Genacodicetagpre

بهذه الطريقة يمكنني حساب موقع العلم بوظيفة سهلة للغاية من جانب العميل دون الحاجة إلى أكثر من 200 تعريف نمط إضافي.

نموذج للمكوِّن الإضافي jQuery:

Genacodicetagpre

الاستخدام التجريبي: Genacodicetagpre

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

وهنا شبح العلم الخاص بي:

Answer 3

كما ذكر المعلقون ، كائن CSS هو الحل المناسب هنا. لحسن الحظ ، يتوفر العديد من رموز CSS من الأعلام مجانًا . هذا يبدو جيدًا.

سيتعين علينا تعديل رمز القائمة المنسدلة لاستيعاب كائن CSS المُعد مسبقًا. لقد تقدمت وفعلت ذلك من أجلك. إليك عرض توضيحي مباشر.

languageswitcher.js

Genacodicetagpre

languageswitcher.css

Genacodicetagpre

كانت تغييرات CSS التي أجريتها عبارة عن اختراقات للأسئلة والأجوبة ؛ ربما سترغب في قضاء بعض الوقت في تلميعها. لقد أزلت جميع العناصر الخاصة بالعلامة من languageswitcher.css نظرًا لأننا نستخدم flag16.css .

أيضًا ، إذا لم يكن رمز البلد موجودًا في كائن CSS ، فستتحول العلامة المعروضة افتراضيًا إلى علم الاتحاد الأفريقي لأنه أول صورة في العفريت. في العرض التوضيحي ، العديد من البلدان في قائمة الأمثلة الخاصة بي لا تحتوي على صورة رموز متحركة. احترس من ذلك.

Answer 4

إليك ملف بقائمة البلدان وروابط لأعلامها (قد لا تعمل بعض الروابط ولكن معظمها يعمل) ملف Excel

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