web-dev-qa-db-ja.com

チェックボックス付きのドロップダウンメニューの例/ベストプラクティス

チェックボックス付きのドロップダウンの良い例があるウェブサイトを探しています。 Gmailのラベルメニューが1つであることはわかっていますが、もっと見たいと思います。一般的なベストプラクティスも大歓迎です。

選択した値を外側に表示する良い方法はありますか? SHIFTは、ドロップダウン内の継続的な選択に使用されますか?継続的な選択を提供する他の方法はありますか?

Gmailのドロップダウンには興味深い機能があります。チェックボックス自体をクリックすると、チェックボックスが選択され、メニューは開いたままになるため、追加の値を選択できます。ただし、チェックボックス自体ではなくラベルをクリックすると、チェックボックスが選択されますそしてメニューが折りたたまれます。私はそれがほとんど混乱していると思います。長所と短所?なぜ常に開いたままにしておき、フォーカスを失い、ドロップダウン自体をクリックしたときに折りたたまないのですか?

編集質問を言い換えます。思い浮かぶチェックボックスのあるドロップダウンの1つの良い例は、Gmailのラベルメニューです。あなたが好きな他のものを知っていますか(ウェブアプリで?)

8

以下は、ライブWebサイトの例です。 http://www.omegawatches.com/watchfinder (例:「機能」ドロップダウン)

これがどれほどうまく機能するかはわかりませんが、残念ながらテストすることはできませんでした。

13
Phil

これは、多くのWebアプリケーションで一般的な要求になっています。定義済みリストから複数の値を指定するため。私の意見では、複数選択ドロップダウンは最良の解決策ではありません。コンパクトですが、選択した値を視覚的に表すものではありません。

私の意見では、Googleドキュメントの検索バーは非常にきちんとしたソリューションを提供します。しかし、私はそれがかなり上級者向けであることを認めます。

「すべてチェック」と「すべてチェック解除」の例を次に示します。

enter image description here

2
Denzo

数年前、オランダの自動車旅行サイト vacanceselect.nl を構築しました。

ページをロードするとすぐに表示される大きな検索ウィジェットで、「bestemming en accommodatie」をクリックすると、複数のチェックボックスを含むアコーデオンパネルが開きます。これらは、ユーザーの操作によって表示されるまで最初は非表示であり、自由にオン/オフを切り替えることができるという意味で、提案されたマルチドロップダウンチェックボックスと同様に機能します。検索ウィジェット全体の重要な機能は、ウィジェットの周りをクリックすると、結果の数が動的に更新されることです(これは、発明するほど楽しいものではありませんでした)。

このことに関する即時のフィードバックは重要です。それがなければ、パネルを開閉して、物事をオンまたはオフにする必要があります。代わりに、各パネルを開いて、結果の数が希望するものになるまで微調整し、次に進むことができます。サイトのユーザーはサイトの仕組みに非常に満足しており、コンバージョンは素晴らしいとクライアントから聞いています(自分で調査する機会はありませんでした)。

お役に立てば幸いです。

1
Rahul

StackOverflowには、例への2つのリンクがある投稿があります: https://stackoverflow.com/questions/4918995/combobox-with-checklist-c

個人的には、使用にはそれほど適していないと思います。リスト付きの複数選択ボックスまたはコンボボックスの適切な使用例は、巨大なeコマースストアのフィルタリングのようですが、ebayとAmazonはそのような方法を使用していないようです。

絶対に必要な場合は、次のように別の方法で表現するのはどうでしょうか http://odyniec.net/projects/selectlist/examples.html

極端な例の場合-タグをクリックしてください- http://www.codeproject.com/info/search.aspx

それは明らかにデザイナーのいない開発者の場合ですが、このコンセプトは非常に迅速に大量フィルタリングを可能にします。

1
Chris Kluis

メールのパフォーマンスレポートで次のコントロールを使用します。人のためのフィルターツールがありますが、これによりユーザーはレポートに含まれる電子メールのリストをトリミングできます。ツリーはアプリの別のセクションにあるツリーと一致し、そこでメールを作成します。

それはすべてのことではありませんが、ユーザーは使用法においてかなり明白です。

Checkbox Tree in Menu

1
Glen Lipka

リンクする例はありませんが、HTMLのデフォルトの実装では、クリックするだけで、Ctrl +クリックでアイテムを選択(または選択解除)するだけで、クリックするだけで選択を解除できます。 -以前に選択したアイテムを選択します。Shift+クリックを使用して範囲を選択し、最も近い選択アイテムからクリックしたアイテムまですべてを選択します。そうはいっても、Shift +クリックとCtrl +クリックは、複数選択の実装で使用されることがあります。

1
ThatSteveGuy

jQuery の既製のコンポーネントの1つは、 Dropdown-check-list です。

基本的には、通常の<select>要素を、チェックボックスまたはラジオボタンのあるドロップダウンボックスに変換します。このコンポーネントには、さまざまな動作を作成するための多様な設定オプションがあるため、各選択後に閉じるかどうか、選択の表示方法、シフトの使用法などを選択できます。

プロジェクトには ライブデモページ もあり、ここでいくつかの設定例を試すことができます。

0
Jawa

たぶん面白い

リンクの下部にある私の答えを確認してください。多分あなたをいくつかのカスタムコントロールデザインに導くことができます。

0
Henrik Ekblom

一般に、複数選択のドロップダウンを実行することは実際にはお勧めできません。複数選択はそのままではユーザーを混乱させるものであり、ドロップダウンで機能させることでさらに混乱が生じるため、事態はさらに悪化するだけです。

0
Charles Boyung