0

私はハイブリッド アプリのプロトタイプに取り組んでいる学生です。私は JQuery Mobile と three.js を使用して、(願わくば) 概念実証の Web アプリを提供し、ストーリーボード作成を支援しています。対象端末はデスクトップ、タブレット（横置き、横置き）です。

サンプルのワイヤーフレームと非インタラクティブな概念のデモスクリーンショットを次に示します。

これまでのところ、JQuery Mobile は UI 設計の点でうまく機能しています。Sencha Touch のような重いフレームワークは、私の目標には複雑すぎます。

メニューとオプションが選択/調整されている間、レンダラー (WebGL キャンバス) を常に表示する必要があります。リンク先のワイヤーフレームのように、分割ビュー/マルチビュー ソリューションが最適だと思いました。だから私は見つけた：

  • Multiview (Stokkers) - 完璧に見えましたが、JQM の非常に古いフォークが必要でした。このプロジェクトは 2012 年から停止しており、読み込むことができませんでした。
  • asyraf9 による Splitview - そのプラグインは非常に古いため、デモでさえ機能しませんでした。
  • SimpleSplitView - 同じく 2012 年から、幸いなことにカスタム JQM スクリプトは必要ありませんでしたが、指示に従ってパネルを左または右にフロートさせることはありませんでした。また、ナビゲーションに制約を課します。

これらのプロジェクトはすべて非常に古いため、特にトラブルシューティングを行う意味があるかどうかはわかりません。

ここにいるすべての経験豊富な人々に尋ねています。マルチビューをどのように構築しますか? 私が見逃している良いプラグインはありますか？私はコーダーではなくデザイナーなので、ここでの焦点は、肥大化することなくこれを迅速かつ効率的に作成し、そのコンセプトを段階的に反復できるようにすることです。乱雑なコードは、それが機能する限り問題なく、邪魔にならず隅のどこかに隠しておくことができます。

2 つ以上のパネル (マルチビュー ソリューションなど) を持つことは大歓迎ですが、2 パネルの分割ビューでもよいでしょう。私はそれを回避することができます。

この質問は、1 年前の「jquerymobile 1.3.X - Splitview 用の最新のプラグイン」に多少似ていますが、私の要件はそれほど具体的ではなく、エクスペリエンス プロトタイプ用の最新のソリューションが必要です。そして、答えのカスタムコードは私が必要としているものではありません.

本当にありがとう！

4

1 に答える 1

0

私は可能な解決策を見つけたと思います。これまでのところ動作します。

古いhttp://demos.jquerymobile.com/1.2.0/ページにある HTML とカスタム CSS コード (jqm-docs.css) を模倣しました。JQM パッケージの一部ではない追加のスタイリングがたくさんあります。

HTML 構造:

<body>
    <div data-role="page">
        <div data-role="header">
            <!--fixed header if you need it-->
        </div>
    <div data-role="content">
        <div class="content-primary">
            Main content on the right goes here...
        </div>
        <div class="content-secondary">
            Left sidebar goes here...
        </div>
    </div>
</body>

私はCSSファイルを取り、これが残るまでそれを取り除きました:

/*replace 650px with desired breakpoint*/
@media all and (min-width: 650px){

    .content-secondary {
        float: left;
        width: 20%; /*change as desired*/
    }

    .content-primary {
        width:80%; /*change as desired*/
        float: right;
        margin-right: -16px; /*override mysterious margins*/
        margin-top: -16px;
    }

}

私が最終的に得たのは、機能するレスポンシブな分割ビューです。理解するのに非常に長い時間がかかった簡単な解決策。HTML 構造が非常に具体的である必要があるためだと思います (ページ内のコンテンツ内のフローティング div)。そうしないと、CSS が無視され、JQM フレームワークでオーバーライドされます。これが同じ問題を経験している人の助けになることを願っています！

于 2015-03-09T12:24:51.033 に答える