フラグ付きのHTML国リスト[クローズ]

Question

国のリストを選択して表示する方法を探しています。できればフラグを付けてください。何か提案はありますか？

私はこのjQueryプラグインを試すことから始めました http://www.graphicpush.com/website-language-dropdown-with-jquery ですが、私が持っている国のリストが非常に多いため、パフォーマンスが非常に悪かったことがわかりました（画像へのhttpリクエストが多すぎます）。また、50要素を超えると、リストが大きくなります。

Answer 1

今後の注意：jQueryUIオートコンプリートがカスタムをサポートするようになりました デフォルトのレンダリングについては、を参照してください。 http://api.jqueryui.com/autocomplete/#method-_renderItem 。

とても簡単です。必要なもの：

1. jQueryUIのオートコンプリート
2. UIオートコンプリートhtml拡張機能
3. A 国名/コードのリスト
4. すべてのフラグが設定されたCSSスプライト

   Googleはあなたの友達であることを忘れないでください。材料をよくブレンドし、JavaScriptを注意深く泡だて器で混ぜると、7行のコードで完了します。 ジェネラコディセタグプレ

   このコードの動作は次のとおりです

Answer 2

フラグスプライトを実行する（私見の）よりスマートな方法を提案したかっただけです。

アイデアは、国のiso2コードに従ってグリッドにフラグを保存することです。

最初の文字->垂直位置
2番目の文字->水平位置

例（16x11pxフラグ+ 4x4px間隔の場合）： ジェネラコディセタグプレ

このようにして、200以上の追加のスタイル定義を必要とせずに、クライアント側で非常に簡単な機能を使用して旗の位置を計算できます。

サンプルjQueryプラグイン： ジェネラコディセタグプレ

デモの使用法： ジェネラコディセタグプレ

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

そしてここに私の旗のスプライト：

Answer 3

コメント投稿者が述べたように、ここではCSSスプライトが適切なソリューションです。幸い、無料で利用できるフラグのCSSスプライトはたくさんあります。 これはかなり良さそうです。

事前に作成されたCSSスプライトに対応するために、ドロップダウンコードを微調整する必要があります。私は先に進んで、あなたのためにそれをしました。 これがライブデモです。

languageswitcher.js ジェネラコディセタグプレ

languageswitcher.css ジェネラコディセタグプレ

私が行ったCSSの変更は、Q＆amp; Dハックでした。あなたはおそらくそれらを磨くのに少し時間を費やしたいと思うでしょう。 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;
}