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 回答