JQuery Mobile 1.4.5 splitview / multiview插件 - 最佳2015原型設計解決方案？

Question

我是一名學生，正在研究混合應用程序的原型。 我正在使用JQuery Mobile和three.js（希望）提供一個概念驗證Web應用程序來幫助人們進行故事板。 目標設備是台式機和平板電腦（水平和橫向）。

這是一個示例線框和一個非交互式概念演示屏幕截圖。

到目前為止，JQuery Mobile在UI設計方面一直非常適合我。 像Sencha Touch這樣的重型框架對我的目標來說過於復雜。

我需要始終可以看到渲染器（WebGL畫布），同時選擇/調整菜單和選項。 我認為splitview / multiview解決方案最好，就像我鏈接到的線框一樣。 所以我找到了：

Multiview（Stokkers） - 似乎很完美，但需要一個非常過時的JQM分支。 該項目自2012年以來已經死亡，無法加載。
Splitview by asyraf9 - 該插件太舊了，即使是演示也不再適用了。
SimpleSplitView - 也是從2012年開始，幸運的是不需要自定義JQM腳本，但按照說明我從未讓面板向左或向右浮動。 還限制了導航。

由於所有這些項目都已經過時，我不確定是否有任何具體的故障排除方法。

所以我在這里問所有有經驗的人，你會如何建立一個多視圖？ 我錯過了什么好的插件？ 我是一名設計師，而不是一名程序員，所以這里的重點是能夠快速有效地生成這個而不會膨脹，然后逐步迭代這個概念。 凌亂的代碼只要它完成工作就可以了，我可以把它藏在角落的某個地方而不受干擾。

擁有兩個以上的面板（例如多視圖解決方案）是最受歡迎的，但即使是雙面板的分割視圖也會很好; 我可以解決這個問題。

這個問題有點類似於一年前的“jquerymobile 1.3.X - 任何最新的splitview插件”，但我的要求並不具體，我需要最新的體驗原型解決方案。 答案中的自定義代碼不是我需要的。

謝謝你！

Answer 1

我想我找到了一個可能的解決方案。 到目前為止工作。

我模仿了舊的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框架忽略和覆蓋。 希望這有助於任何遇到同樣麻煩的人！

JQuery Mobile 1.4.5 splitview / multiview插件 - 最佳2015原型設計解決方案？

問題描述

1 個解決方案

解決方案1
0 2015-03-09 12:24:51

JQuery Mobile 1.4.5 splitview / multiview插件 - 最佳2015原型設計解決方案？

問題描述

1 個解決方案

解決方案1 0 2015-03-09 12:24:51

解決方案1
0 2015-03-09 12:24:51