web-dev-qa-db-ja.com

右側のコンテンツをトリガーする左側の静的リストを持つ社内ツールにフレームを使用することは有効でしょうか?

私の会社が過去15年間使用していた古いVisual FoxProシステムのインターフェースを交換しています。ユーザーが不満を言っていることが1つあるとすれば、それは退屈です。

使いやすさが、再構築における私の哲学の原動力です。私のモックアップからわかるように、左列には(最終的に)リアルタイムのキュー/リストを含むいくつかのタブが含まれていると考えています。キューのいずれかのアイテムをクリックすると、関連するすべての機能へのリンクを含むスライドアウトメニューが生成されます。これらには、詳細ビュー、レポート、非常に大きなフォームが含まれます。左側の列を常に静的に表示したまま、右側に表示されるようにしたいです。私の最初の考えはフレームを使用することですが、最近はそれを避けています。これはフレームの有効なケースですか、それともより良いオプションがありますか?

my layout mock-up

6
Rick R

キューのいずれかのアイテムをクリックすると、関連するすべての機能へのリンクを含むスライドアウトメニューが生成されます。

フレームを使用した場合、「スライドアウトメニュー」を作成できません。スライドアウトメニューは、「その他」のフレームに表示する必要があるかのように見えますが、これは非常に難しく、特にクリックされたアイテム(左側)に関連付けるには困難です。

あるいは、この「二次メニュー」は、beneathの下に表示されます(つまり、同じフレームに)。

フレームの使用に関するその他の考慮事項(最初の2つはここでは適用されない場合があります):

  • インデックス作成には非常に問題があります。 「社内ツール」は明らかにパブリックドメインでのインデックス作成を必要としません。ただし、「社内」インデックスが引き続き適用される場合があります。

  • リンクをブックマーク/共有することはできません。これは追加(パーマリンク)機能として実装できますが、不必要な複雑さが追加されます。

  • このツールを複数のプラットフォームで使用する場合、「レスポンシブ」デザインを作成することが困難/不可能です。

  • フレーム(つまり、<frameset>タグなど)は、HTML5では「完全に廃止されました」。したがって、準拠したい場合は、インデックスドキュメントのHTML4 DOCTYPEにフォールバックする必要があります。

しかし、そうでなければ、これは「社内ツール」として機能する可能性があると思います。


Divを使用してコンテンツを取り込むことは確かにできますが、膨大な数のページについて話しているため、フォームにはそれぞれ100個近くのフィールドが含まれる可能性があります。私はそれを引き出すのにかかるJSを推測することはできません。

PDATE: closetnocの提案は非常に合理的だと思います。フレームを使用するよりも必ずしも多くの作業が必要になるとは思わない(ただし、問題を単純化しすぎているのかもしれない).

フレームを使用する場合、ユーザーは左フレームで選択を行い、サーバーにドキュメントを要求して右フレームに入力します。

フレームがない場合、ユーザーは左側のコンテナで選択を行い、サーバーからドキュメント(おそらく「ページラッパー」を除く、フレームで使用されるドキュメントと同じドキュメント)のAJAXリクエストをトリガーします。 <head>および<body>タグ)そして、これは右側の要素を含むinnerHTMLに適用されます。おそらく単純化しすぎです。

これらの「ドキュメント」が現在、独自のスタイルシートに依存している場合、このアプローチは問題になります。 HTML5はCSSをサンドボックス化するためのscoped属性を提供しますが(これは回避できますが)、現時点ではAFAIKはFirefoxでのみサポートされています。

0
MrWhite

フレームの使用は段階的に廃止されており、フレームの処理方法と表示方法についてはブラウザー間で大きな不一致があります。 AJAXと空のDIVを使用することで、よりユーザーフレンドリーで持続可能性の高い方法で効果的に同じことを達成できます。いずれにしてもサブページはそれぞれ独自のページになりますが、フレームを使用してアクセスするのではなく、AJAXを使用して要求し、空のdivに貼り付けます。これにより、回転アイコンを使用して、それが機能していることを示すことができます(フレームでは非常に難しいものです)、サブページのコンテンツをより友好的かつインタラクティブな方法で操作できます。作業を簡単にするためのフレームワーク。

0