web-dev-qa-db-ja.com

このUIパターンは何と呼ばれていますか?

私はこの種のものが何と呼ばれるか、そして最終的にはWebブラウザでどのように作成できるかを理解しようとしています。次のようになります(最初に頭に浮かんだアプリのスクリーンショット):

enter image description here

私が探している特定のコンポーネント/パターンは、セットからのアイテムの包含/除外を表す2つの リストボックス (「含まれるギア」と「除外されるギア」)です。 WPF名(ある場合)は実際には探していませんが、役立つ場合があります。

amこのものの名前を探しています、もしあれば、本当に私の一日を作りたいのなら、jQueryに私を向けることができますまたはブラウザでこれらの取引の1つを作成するYUIの方法。

59
Matt Ball

一般的に「デュアルリスト」と呼ばれる「正式な」名前や、さらに一般的には「2つのボックスがあり、その間を移動できるもの」として知られている名前はないと思います。

これは、このためのjQueryプラグインです: https://github.com/Geodan/DualListBox

40
adamJLev

デザイニングインターフェイス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/TkTkinterRuby/Tk 、および "どこでも(他の)細かい(Tk)ウィジェットが販売されています。 "

34
Tripp Lilley

それは本当に栄光のマルチセレクトリストです。 「含まれる」(選択された)「除外された」(選択されていない)状態は2つしかないため。選択されたアイテムと選択されていないアイテムを2つの列に分割し、2つの列の間でドラッグアンドドロップできる、かなり素敵な複数選択ウィジェットがあります。

http://www.quasipartikel.at/multiselect/

6
PetersenDidIt

ベンダーがそれらを slushbuckets と呼んでいると聞きました。

5
antony.trupe

Microsoft UXGuide が何らかの手段で決定的である、または完全であるというわけではありませんが、この概念を List Builder

enter image description here

最近、矢印やラベル付きボタンなどをいつ使用するかについてのベストプラクティスを理解するために、このUIコンセプトの例も探しています。 Google画像検索で最も多くの例が得られた検索は、デュアルリストuiです。

質問の2番目の部分のjQueryソリューションに関しては、無限大の答えがおそらく最も適切だと思いますが、このUIパターンに関して私が見つけたものについて2セントを提供したいと思います。

5
jpierson

私はいつもそれがアキュムレータと呼ばれていると思っていましたが、Googleでそれをサポートするものを見つけるのに非常に苦労しました。 Iの使いやすさに関するあいまいな哲学の卒業論文 でそれについて言及しています。

図4-1は、アキュムレータウィジェット(つまり、可能な値の左側のリストから累積された選択されたアイテムの右側のリストにアイテムを転送するコンポーネント)に適用される方向変更ルールの例を示しています。

Figure 4-1

そして、いくつかの別の言及 1998年からの学生プロジェクト

3
Jesse Buchanan

私はそれらをWebコンテキストで接続された並べ替え可能物と考えるでしょう: http://jqueryui.com/demos/sortable/#connect-lists

2
Gabriel

あなたが情報を行き来しているので、私はいつもそれらを「シャトルコンポーネント」と呼んでいます-これは やや一般的 のようです。可能性のリストに追加すると思いました。

2
cjstehno

JQueryでもYUIでもないが近い2つの例を次に示します。これらの2つの例はExtJSからのものです。 1つは2つのツリーを利用し、他の2つのデータグリッドを利用します。どちらもかなり滑らかで、デザインのアイデアを手伝ってくれるかもしれません。

ところで:私は通常、それらがデュアルリストとも呼ばれるのを聞いたことがあります。

2つのグリッド

2本の木

1
FallenRayne

これは、「ムーバー」または「リストムーバー」と呼ばれることがよくあります。

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つのバリエーションは、ダブルクリックして移動を有効にすることです。

1
RichMeister

これに対する標準的な制御はありません。通常、2つのリストといくつかのボタンを使用して実装され、1つまたはすべてのアイテムを1つのリストから別のリストに、またはその逆に移動します。単一のアイテムを移動するボタンの代わりに、ダブルクリックを使用できます。 1つまたは複数のアイテムを移動するには、ダグアンドドロップを使用できます。

パターンの名前は…よくわかりません。

0
AxelEckenberger

私の同僚と私は常にこれを「2ボックス選択」と呼んでいます。舌を上手に転がしているようです。

0
Matthew Smith

固有名詞があるかどうかはわかりませんが、DevXにはそのようなもののストレート JavaScript実装 をカバーするページがあります。

0
Trevor Tippins