私はこの種のものが何と呼ばれるか、そして最終的にはWebブラウザでどのように作成できるかを理解しようとしています。次のようになります(最初に頭に浮かんだアプリのスクリーンショット):
私が探している特定のコンポーネント/パターンは、セットからのアイテムの包含/除外を表す2つの リストボックス (「含まれるギア」と「除外されるギア」)です。 WPF名(ある場合)は実際には探していませんが、役立つ場合があります。
私amこのものの名前を探しています、もしあれば、本当に私の一日を作りたいのなら、jQueryに私を向けることができますまたはブラウザでこれらの取引の1つを作成するYUIの方法。
一般的に「デュアルリスト」と呼ばれる「正式な」名前や、さらに一般的には「2つのボックスがあり、その間を移動できるもの」として知られている名前はないと思います。
これは、このためのjQueryプラグインです: https://github.com/Geodan/DualListBox
デザイニングインターフェイス 、 UIパターン コレクション、 ジェニファーティドウェル は、リストビルダー。 「デュアルリスト」 と 「リストビルダー」 の両方が 学術文献 と 業界リソース の両方で認識されているようです。 SO in this comment on the postLong check list ui pattern for web。
パッケージ化されたjQueryコンポーネントがあるかどうかはわかりませんが、DZoneにはjQueryを使用した独自のローリングに関する記事があります:HTMLリストビルダー:jQueryの適用に関する研究
また、 異なるlist builderパターン も見つかりました。これは、同じコア問題に対して非常に異なるアプローチを取ります。
それらや他の同様の デザインパターンカタログのパターン は、問題を攻撃する他の方法のインスピレーションを与えるかもしれません。私はいつも「デュアルリスト」パターンをちょっとしたハックだと思っていましたが、これまでずっともっと良い選択肢がありました...数十年、今は:-)
更新:"swaplist" というラベルの付いたこのパターンに出くわしました Tklib および 「Disjointlistbox」[incr Widgets] Tk "mega-widget"ライブラリ。したがって、 Perl/Tk 、 Tkinter 、 Ruby/Tk 、および "どこでも(他の)細かい(Tk)ウィジェットが販売されています。 "
それは本当に栄光のマルチセレクトリストです。 「含まれる」(選択された)「除外された」(選択されていない)状態は2つしかないため。選択されたアイテムと選択されていないアイテムを2つの列に分割し、2つの列の間でドラッグアンドドロップできる、かなり素敵な複数選択ウィジェットがあります。
ベンダーがそれらを slushbuckets と呼んでいると聞きました。
Microsoft UXGuide が何らかの手段で決定的である、または完全であるというわけではありませんが、この概念を List Builder 。
最近、矢印やラベル付きボタンなどをいつ使用するかについてのベストプラクティスを理解するために、このUIコンセプトの例も探しています。 Google画像検索で最も多くの例が得られた検索は、デュアルリストuiです。
質問の2番目の部分のjQueryソリューションに関しては、無限大の答えがおそらく最も適切だと思いますが、このUIパターンに関して私が見つけたものについて2セントを提供したいと思います。
私はいつもそれがアキュムレータと呼ばれていると思っていましたが、Googleでそれをサポートするものを見つけるのに非常に苦労しました。 Iの使いやすさに関するあいまいな哲学の卒業論文 でそれについて言及しています。
図4-1は、アキュムレータウィジェット(つまり、可能な値の左側のリストから累積された選択されたアイテムの右側のリストにアイテムを転送するコンポーネント)に適用される方向変更ルールの例を示しています。
そして、いくつかの別の言及 1998年からの学生プロジェクト 。
私はそれらをWebコンテキストで接続された並べ替え可能物と考えるでしょう: http://jqueryui.com/demos/sortable/#connect-lists
あなたが情報を行き来しているので、私はいつもそれらを「シャトルコンポーネント」と呼んでいます-これは やや一般的 のようです。可能性のリストに追加すると思いました。
これは、「ムーバー」または「リストムーバー」と呼ばれることがよくあります。
JavaScriptとJQueryの例を次に示します。
http://javascript.internet.com/miscellaneous/move-dual-list.html
http://www.hscripts.com/scripts/JavaScript/move-list.php
http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html
http://kgaddy.com/jqueryMoverBoxes/
多くの場合、実装により、複数選択を実行し、選択したすべてのアイテムを一度に移動できます。
もう1つのバリエーションは、ダブルクリックして移動を有効にすることです。
これに対する標準的な制御はありません。通常、2つのリストといくつかのボタンを使用して実装され、1つまたはすべてのアイテムを1つのリストから別のリストに、またはその逆に移動します。単一のアイテムを移動するボタンの代わりに、ダブルクリックを使用できます。 1つまたは複数のアイテムを移動するには、ダグアンドドロップを使用できます。
パターンの名前は…よくわかりません。
私の同僚と私は常にこれを「2ボックス選択」と呼んでいます。舌を上手に転がしているようです。
固有名詞があるかどうかはわかりませんが、DevXにはそのようなもののストレート JavaScript実装 をカバーするページがあります。