Selecto.js - Web上でドラッグで選択するUXを実現 MOONGIFT
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.
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
無料で簡単に英語だけでなく複数言語の翻訳がいろいろな翻訳エンジンを選んで可能な「QTranslate」
サポートしているブラウザ・アプリケーション（Google Chrome・IE・Microsoft Word・Microsoft Outlook・Acrobat Reader・Skypeなど）の文書を選択しショートカットキーを使ってすぐに翻訳することが可能で、Google Translate・Microsoft Translator・Promt・Babylon・SDL FreeTranslation.com・Яндекс переводの翻訳エンジンを選び複数言語を翻訳できるのが「QTranslate」です。Windows XP・Vista・7・8・Server 2003・Server 2008で起動可能となっています。 ダウンロード、操作方法については以下から。 QTranslate - Download http://quest-app.appspot.com/download 上記サイ
複数選択できるドロップダウン「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
Color Palette Generator - Colllor
Create consistent color palettes With Colllor it is much easier to generate a consistent web color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values. This tool wil
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プラグイン・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」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
