multi.js - 複数選択のドロップダウンをリッチに変身 MOONGIFT
WebのフォームはHTML5でリッチになっていますが、それでもまだまだ標準では使い勝手がよくありません。とは言え、それを改善するためのライブラリも出てきていますので、積極的に取り入れていきましょう。 今回紹介するのはmulti.js、複数選択できるselectタグを格好良くしてくれるライブラリです。 multi.jsの使い方 multi.jsを使っていない場合はこうなります。正直選びづらいし、キーボードを組み合わせるのは面倒です。 それがこうなります。 絞り込みできます。選択すると右側のリストに追加されます。 すでに選ばれているものは色が薄くなります。 multi.jsを使うと複数選択するドロップダウンが一気に便利になります。大きさも変わるので、それに合わせてデザインを考える必要がありますが、ぴったりと当てはまるケースもありそうです。 multi.jsはJavaScript製のオープンソー
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 動作サンプルです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.multiple.select.js"></script>本体とプラグインを読み込みます。 $('#foo').multipleSelect();セレクタにはselect要素を指定します。 また、細かいオプション設定が可能です。詳
Bootstrap向けの、select要素の複数選択を分かりやすくするjQueryプラグイン・Bootstrap Multiselect
Twitter Bootstrap向けに作られた、select要素の複数選択を分かりやすくするjQueryのプラグインのご紹介。個人的にBootstrapの使用率が減りましたので利用させてもらう機会は無いかもですけど・・ Bootstrap向けのマルチセレクトのユーザビリティ向上用スクリプトです。 チェックボックス式になっていて、チェックが入るとハイライトされます。 数が多い場合はenableFilteringというオプションを使えばフィルタリングもできる。と言っても、あまり多すぎるようならもう少し工夫しないとですね。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type
jQuery multiselect
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under WTFPL license) Works in an unobtrusive fashion Fully open sourced Keyboard support Provides some callbacks Fully customizable via CSS Depends on jQuery 1.8+ Tiny code ~8kb minified HTML <html> <head> <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
複数選択できるドロップダウン「jQuery MultiSelect Widget」
フォーム上で、多数の選択肢の中から複数の項目を選択できるようにする場合、multiple属性をつけたselectを使うことがあります。 ただ、複数選択するにはshiftキーやctrlキーを押しながら項目をクリックする必要があり、パソコンに不慣れな人には分かりづらいです。 そこで、チェックボックスとドロップダウンの組み合わせで、分かりやすく複数選択できるjQueryのプラグインを探して<みました。 すると、「jQuery MultiSelect Widget」というプラグインがありました。 jQuery MultiSelect WidgetはEric Hynds氏が開発したプラグインです。 jQuery／jQuery UIと組み合わせて動作します。 使い方は簡単です。 jQuery／jQuery UIとこのプラグインのスクリプトを組み込み、またスタイルシートも組み込みます。 その上で、基本的
複数選択できるselect要素で選択した項目を分かりやすく表示するjQueryプラグイン・bsmSelect
フォームのselect要素で複数選択 可能なフォームをユーザーが利用 しやすくする為のプラグインです。 現在選択中の項目を分かりやすく 表示してくれます。 multiple属性を使った複数選択可能なselect要素はとても便利ですが、ユーザーが使いにくく、利便性向上は課題の一つです。その利便性を向上させてくれるのがbsmSelectです。 複数選択すると下部に選択中の項目が表示されます。削除も可能。IE7などでも動作しました。 動作サンプルです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.bsmselect.js"></s
jQueryでセレクトボックスの複数選択と単一選択を切り替える
jQueryでセレクトボックスの複数選択と単一選択を切り替える方法を紹介します。 １．サンプル サンプルを用意しましたので動作を確認してください。 サンプル 以下、サンプルの動作を説明します。次のセレクトボックスがあります。 このセレクトボックスは項目をひとつしか選択できません（単一選択）。 青色のリンクをクリックすれば、複数選択可能なセレクトボックスに切り替わります。 CtrlキーやShiftキーと組み合わせてクリックすれば次のように複数選択できます。 ２．コードと解説 サンプルのメインとなるコードは次の通りです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script> $(function(){ $('.change').click(function
デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン:phpspot開発日誌
jQuery SelectBox plugin デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン。 次のようないい感じのデザインで、かつ、１つのselectボックスを変更すると他のselectボックスの内容を変更できるイベントハンドラの設定が可能。 イベントハンドラに、onOpen, onClose, onChange といったメソッドにその処理を書いておけばカスタマイズが可能です。 以下、サンプルコードです。実装がカンタンな上に後から見たときに分かりやすい。JavaScript最高です 関連エントリ 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQ
フォームのselect要素で複数選択を簡略化できるjQueryプラグイン・jquery.multi-select
フォームのselect要素で、直感で複数選択 出来るようにするjQueryプラグイン。複数 選択できるようにしたい場合は多くの場合は 選択項目が多く、Ctrlを使わせるのはあまり ユーザーフレンドリーとは言えませんので、 簡単に選べるようにする、というもの。 同じように複数選択を簡略化する方法は既出ですが、まぁ選択肢を増やすつもりで。IETesterでのIE6でも動作確認出来ました。 クリックすると、選択した項目が左カラムに移動します。マウスのみで複数選択出来るのでユーザーにも優しい設計では。 反対にキャンセルしたい場合は左カラムでクリックすれば右に移動します。 複数選択とかヘッダを加えるとか選択させないとかも出来るようですよ。 使いどころは限られそうですが、見た目もすっきりしているので割と便利かもですね。デモもあるのでご興味がありましたら。 jquery.multi-select
selectボックス利用時に選択肢を複数選べるUIを提供してくれるjQueryプラグイン「selectList」:phpspot開発日誌
selectボックス利用時に選択肢を複数選べるUIを提供してくれるjQueryプラグイン「selectList」 2011年04月26日- selectList jQuery plugin - Examples - odyniec.net selectボックス利用時に選択肢を複数選べるUIを提供してくれるjQueryプラグイン「selectList」 selectボックスでアイテムを選択していくと次のように選んだアイテムがポコポコ追加されていくUIが簡単に提供できます 追加されるアイテムのテンプレートやCSSによるスタイルもオプションで指定できます。 基本的には、$('select').selectList(); で簡単に使えます。 関連エントリ jQuery UI のアイコンチートシート レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」
jQuery Doubleselect Plugin
Fill in a second select box dependent on the first one. Version : 1.3.1 Written by : Johannes Geppert Download : jquery.doubleSelect.1.3.1.zip Example : DoubleSelect Demo Code $(document).ready(function() { "Vegetables": { "key" : 10, "defaultvalue" : 111, "values" : { "tomato": 110, "potato": 111, "asparagus": 112 } }, "Fruits": { "key" : 20, "defaultvalue" : 212, "values" : { "apple": 210, "oran
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
