2

ユーザーがフィールドの入力を動的に追加できるフォームがあります。たとえば、プロジェクトを追跡するためのフォームがある場合、そのプロジェクトにタスクを動的に追加したいとします。私の言葉を明確にするために、タスク フィールドの入力を動的に追加します。問題は、これらのフィールドが 50 あることです。現在のソリューションでは、フィールドの横にプラス (+) が付いた 50 個のフィールドすべてが表示され、そのフィールドに別の入力ボックスを追加できるようになっています。フィールドのラベルはフィールドの左側にあり、追加される各入力ボックスは現在の入力ボックスの下に表示されます。

入力を動的に追加することが正しい解決策であると信じてください。これは考え抜かれたものであり、これがユーザーが望んでいるものであると信じてください。私たちは他のさまざまな道をたどりましたが、これが最善の解決策であると信じてください。

私の質問はプレゼンテーションについてです。どのようにしますか?

答えはUIデザインにとどめておいてください。データベースのスキーマはすでに把握しています。

アップデート

現在のソリューションは、JavaScript を使用して新しい入力を動的に追加する Web ベースのアプリケーションであり、Corey Trager の図に非常によく似ています。

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

Repeat 50 times...
4

8 に答える 8

1

@zacharyが提案したことから考える：

デフォルト/最後に保存されたフィールド数を使用して、ユーザーに設計されたとおりにフォームを表示します。フォームの下部に、+アイコンと単語Add Field（ + Add Field ）を持つDropDownButtonを配置します。

このボタンをドロップダウンすると、使用可能なすべてのフィールドのリストが表示されます。ユーザーがこれらのいずれかを選択すると、フォームが大きくなります（新しいフィールドを収容するのに十分です）。ラベル付きの新しいフィールドがフォームの下部に表示され、[フィールドの追加]ボタンが新しいフィールドの下に表示されます。

編集：

ASCIIダイアグラムのテーマに従うと、これが私の提案のようになると思います。

タスク[......................]
        [+タスクの追加▼]

Foo [......................]
        [+Fooを追加▼]

于 2008-09-30T13:00:22.427 に答える
1

それで、あなたが説明したことはこのように見えることができますか？そうでない場合は、「描画」してみてください。

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

これはWebページですか、それとも他のテクノロジーですか？

于 2008-09-30T13:00:48.370 に答える
1

これは完全に的外れかもしれませんが、フィールドの要件と、これが構成またはデータ入力インターフェースであるかどうかによって異なります。

データ入力のためにフィールドを開く必要がある場合は、フィールド名と値のリストとして定義したままにし、必要に応じてクリック編集を使用して各要素に入力ボックスを動的に配置できます。

このソリューションは、視覚的なノイズを減らし、垂直方向のスペースを節約できます。ご覧のとおり、フォーム入力はプレーン テキストよりも多くのスペースを占有します。タブ イベントをキャプチャし、次のフィールドのクリックによる編集機能をトリガーすることで、キーボード ユーザーに対応できます。

それはこのように見えるかもしれません。（コンテンツを編集するために Foo をクリックしただけです）

Name   : Joe Blogs
Phone  : 555-1234
Cheese : Stilton
        -----------
Foo     | SNAFU   |    
        -----------
Bar    : fubar
Fifty  : Whatever

(+) Add new field...

また

これが構成ページの場合、つまりプロセスの別の画面またはステージで入力する新しいフィールドを追加する場合、フィールドのリストを順番に定義し、データ入力のためにユーザーに表示することができます。

              -------------------------------------------------
Define Fields | name, phone, cheese, foo, bar ..(etc).. fifty |
              -------------------------------------------------

次に、フィールドは現在の UI に従って巨大なグリッドに表示されます。

于 2008-09-30T14:27:56.723 に答える
0

最後のタスクフィールドの近くにある小さな+アイコンと、「新しいタスクを追加」というリンクがあります。クリックすると、現在の最後のタスクの下に新しいタスクフィールドが表示されます。

于 2008-09-30T12:53:17.793 に答える
0

ドラッグアンドドロップアプローチを使用して、ユーザーが柔軟にポジショニングできるようにします。これは、Webアプリケーションを使用しても可能です。たとえば、Dropthings（http://www.dropthings.com/）を参照してください。これにより、ASP.NET環境でドラッグアンドドロップを実装するために必要なすべてのコードが提供されます。

どのような環境を使用していますか？

于 2008-09-30T12:53:46.937 に答える
0

これがWebアプリの場合、Javascriptを使用して追加のフィールドを動的に管理できます。フォームを非同期で処理できるかどうかに応じて、フォーム管理のいくつかの側面を簡素化するAjaxを使用できます。

基本的に、各タスクには個別に名前が付けられている必要があり、次に、追加することを選択した新しいフィールドごとに、一意に名前が付けられた新しいフォーム入力要素を追加する必要があります。次に、フォームを送信する前にJavascriptを使用してフォームをループするか、送信後にPOSTデータをループする必要があります。

もちろん、これにより、Webアプリの要件としてJavascriptが導入されますが、これは常に実行可能であるとは限りません。

于 2008-09-30T13:01:17.510 に答える
0

Facebook で実装されているような、テキスト ボックスが 1 つだけで、複数の項目を追加できるシステムを使用できないでしょうか。mootools v1.2 用の this oneや jQuery 用のthis oneなど、事前にコード化されたソリューションがあります。また、システムに既にあるタスクのオートコンプリートを許可することもできます。

于 2009-07-11T03:52:22.297 に答える
0

わかりました、あなたの質問に私の図を追加したので、私の答えは....

これが良いとは言いませんが、代替手段です。水平スクロールをクリックに置き換える別の方法を次に示します。「タスク」から「foo」、「バー」へと垂直スクロールでナビゲートする代わりに、「タブ」を使用してください。ランダムな順序でナビゲートしやすくなります。このタブ付きビューから現在の「すべて表示」ビューに切り替えることもできます。

[task][foo][another tab][another tab][etc][etc][etc][etc][etc][etc]
[row2][fred][another tab][etc][etc][etc][etc][etc][etc][etc]
[row3][another tab][wilma][etc][etc][etc][etc][etc][etc][etc]

[task1     ]+
[task2     }+
[task3     ]+
于 2008-10-01T03:10:08.390 に答える