【jQuery】chosenプラグインって日本語いけたんだ!じゃーセレクトボックスはこれで良いじゃん!

chosenプラグインはご存じですか?
セレクトボックスの中身を直感的に検索できちゃうアイツですね。
以前、日本語もいけるのかな?とchosenを試した時には英語のみ対応だったのでちょっと見送ったのですが、日本語も対応できるようにカスタマイズすれば良いかと改めて最近ダウンロードしてみたら、いつの間にか日本語も対応してたんですね。

もしや最初からなの?
まあそこはどなたか知っていたら教えて欲しいのですが、使い方とデモを書いておきます。

 
2014/10/15 追記
下記の投稿で日本語に最適化したchosenプラグインに関して書いています。

プログラミングやWordPressを習得するのに一番近道な方法とは?


 

とりあえずデモを見てみる

うん、日本語もいけますね。
 

chosenの使い方

まずはchosenのダウンロードから。
赤い枠で書いたところがダウンロードリンクです。
実際のダウンロードは2ページ目のGitHubからですね。

①ページ目

Chosen__A_jQuery_Plugin_by_Harvest_to_Tame_Unwieldy_Select_Boxes

 
②ページ目

Releases_·_harvesthq_chosen

 
ダウンロードしたら必要なファイルは「chosen-sprite.png」「chosen-sprite@2x.png」「chosen.jquery.min.js」「chosen.min.css」の4ファイルです。
chosen_v1_1_0
 
それではコードを載せていきます。
 CSS

 
 javascript

 
 HTML

ポイントは最初のoptionのvalueを空にすることでdata-placeholderに設定した文言がセレクトボックスの初期値で表示されるようになることです。

 

まとめ

日本語が使えるならもうセレクトボックスは全部これ使っても良いかもしれませんね。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA