[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2
セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2 GitHub [ad#ad-2] Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一部のものにバグあり。 Chrome8+ Firefox3.5+ Safari3+ Opera10.6+ Select2のデモと実装 各デモとともに実装方法を紹介します。 jQueryは1.7+推奨で、1.4.2から対応しています。 デモ：ベーシック（上：既存、下：Select2適用） まずは、ベーシックなデモから。 下記のシンプルな記述で、既存のセ
Movable Typeでタグのインクリメンタルサーチを実現する
Movable Typeの検索フォームを使ったタグ検索で、インクリメンタルサーチが行えるようにするカスタマイズです。 このカスタマイズを行えば、次のようにタグ文字列を1文字入力するたびに、候補を表示してくれます。ご覧のとおり、途中の文字の検索もできます。 日本語の検索も可能です。 タグのインクリメンタルサーチを導入すれば、タグクラウドのようにページを占有する必要がなくなります。タグ数が多いほど有効です。頻度の高いタグだけを表示するタグ一覧と併用するという手もあります。 ここでは「クラシックブログ」テーマに適用する方法を紹介します。 検索フォームを使ったタグ検索の動作については「Movable Typeの検索フォームでタグ検索をする」をご覧ください。 １．ライブラリのダウンロード・アップロード 「suggest.js - 入力補完ライブラリ」のページにアクセスして、「suggest.js」を
キーワードを入力するだけで自動で該当する候補をキーボードで操作可能なテーブル内に表示するjQueryプラグイン・jQuery ComboGrid
オートコンプリート機能でキーボードで操作できる コンボボックスを出してくれる、というjQueryの プラグイン・jQuery ComboGridのご紹介です。 なかなか高機能なプラグインですね・・・文字を 入力するだけで自動で候補をテーブルとして 出してくれます。ページの切り替えはキーボード で操作可能です。 使う頻度は少なそうですが、とても見やすく、ユーザーの操作も少なくて済み、直感で操作が分かるようなUIでもあるので覚えておくとどこかで役に立つかもしれません。IE6や7でも動いてくれますが、IE6はcssで調整が必要です。 こんな感じで入力フィールドにaと入力しただけで候補がコンボボックス内に表示されました。このボックスはajaxで呼び出しており、キーボードで次のページに移動したり、その場で表示する候補の数を増やす、要素のソートなども出来ます。 jQueryUIを使っているのでこのよう
フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen
結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力 するだけで結果を表示するインスタンス検索 を可能にするスクリプト・Chosenです。表題 にはjQueryプラグインと書きましたが、この スクリプトにはjQueryプラグインとprototype の2つが用意されています。 optionの量が多くなってしまうことはよくあるので、この手のユーザビリティ向上系スクリプトは多く存在しますが、これはかなり便利ではないかなと思いました。似たようなのもうあるんですかね。 通常のselectボックスでプルダウンさせると検索窓も表示、キーワードを入れるだけでソートしてくれます。いわゆるインスタンス検索が可能になるので大量のoptionが存在してもユーザーの利便性を全く損ないません。 デモ見たほうが早いですね。※追記：日本語だとFirefoxのみ動かないみたい。英
YoutubeのAPIとjQueryを使って動画をインクリメンタルサーチする
便利に感じたのでメモ。Youtubeの 動画を検索キーワードを入れただけ で瞬時に結果を表示させる、という、 インクリメンタルサーチをjQueryで 実装するというもの。検索には YoutubeAPIを使用します。 Youtubeの動画検索をWordPressの管理画面内で出来るプラグインを自作して使っていたんですがどうにも使いにくかったところ、jQTubeUtilなるプラグインでサクっとインクリメンタルサーチが可能のようでこれを採用しました。 jQTubeUtil インクリメンタル検索を可能にするjQueryプラグインです。インクリメンタルサーチと言ってもあまり聞きなれないかも知れないのでデモ触ったほうが早いですかね・・ 以下にデモを用意しました。サジェストとして検索結果が即時表示されます。 サンプル +Mobily PlaygroundデモはMobily Playgroundのサンプル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
