web-dev-qa-db-ja.com

選択パネルとドリルダウンパネルを関連付ける最良の方法は?

メインテーブルの選択とドリルダウンパネルの相関関係を明確にしようとしています。

ページを開くと、最初のパネルのみが表示されます。テーブル行の1つをクリックすると、ドリルダウンパネルが表示されます。このフローでは、相関関係は明らかです。

しかし、ドリルダウンパネルが既に開いているリンクをユーザーが開いた場合はどうなるでしょうか。または、スクリーンショットが表示されたら?

どうすれば2つの間の相関関係を改善できますか?

layout

3
Fez Vrasta

水平方向のスペースに制限されていない場合は、詳細を右に移動できます。 enter image description here

ただし、スペースとテクノロジーに制限がある場合は、アクティブな行と詳細を結ぶ線を追加し、同じハイライト色を使用できます(最初に線を表示し、次に詳細を示すボックスを表示する意味のあるアニメーションを検討することもできます)。

enter image description here

1
Maciej Sawicki

使用しているテクノロジーを指定していませんが、「...リンクを開く...」と書いて、html/css/jsに関するものだと思います。

3つのタイプの強調表示を考えることができます。

  1. .activeの追加:相関色を使用したり、フォントの太さを変更したり、影を追加したり、変換を行ったりすることで、ドリルダウンをハイライト表示するクラスを追加できます。これはすべてcssで実行できます。

  2. .inactiveの追加:非アクティブなセクションの可視性、アルファ、および色を減らします。

  3. アイコンの実装:アイコンを使用すると、特定のエンティティが開いていることをユーザーに示すことができます。例としては、開いたフォルダと閉じたフォルダ、三角形の矢印、プラス/マイナスなどがあります。FontAwesomeは、これを実現するための素晴らしい例です。

「...リンクを開く...」の場合:たとえば、アンカーが既に設定されている場合、ロード時にドリルダウンを表示する代わりに、タイムアウトを設定し、セクションまでスクロールして開き、点滅させます。一度。これはjQueryで簡単に実行できます。

ドリルダウンの位置は、テーブルの行の内側にする必要があります。また、無理をしないでください。時には少ない方がいいこともあります。

Bootstrapには、思考を実現するための組み込み関数がいくつかあります。多分あなたは見てみる必要があります。

1
Mruf