0

我是一名学生，正在研究混合应用程序的原型。我正在使用 JQuery Mobile 和 three.js 来（希望）提供一个概念验证网络应用程序来帮助人们进行故事板。目标设备是台式机和平板电脑（水平和横向）。

这是一个示例线框和一个非交互式概念演示屏幕截图。

到目前为止，JQuery Mobile 在 UI 设计方面对我来说一直非常出色。Sencha Touch 等较重的框架对于我的目标来说太复杂了。

我需要让渲染器（WebGL 画布）始终可见，同时选择/调整菜单和选项。我认为拆分视图/多视图解决方案是最好的，就像我链接到的线框一样。所以我发现：

  • Multiview (Stokkers) - 看起来很完美，但需要一个非常过时的 JQM 分支。该项目自 2012 年以来就已终止，无法加载。
  • asyraf9 的 Splitview - 那个插件太旧了，甚至演示都不再工作了。
  • SimpleSplitView - 同样从 2012 年开始，幸运的是不需要自定义 JQM 脚本，但按照说明，我从来没有让面板向左或向右浮动。也限制了导航。

由于所有这些项目都非常过时，我不确定是否有任何专门解决它们的问题。

所以我问这里所有有经验的人，你会如何构建多视图？我缺少任何好的插件吗？我是一名设计师，而不是一名编码员，所以这里的重点是能够快速有效地制作这个而不会臃肿，然后逐步迭代这个概念。凌乱的代码只要能完成工作就可以了，我可以把它藏在角落里的某个地方而不会受到干扰。

拥有两个以上的面板（例如多视图解决方案）是最受欢迎的，但即使是两个面板的拆分视图也会很好；我可以解决这个问题。

这个问题有点类似于一年前的“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 回答