0

I'm a student working an a prototype of a hybrid app. I'm using JQuery Mobile and three.js to (hopefully) provide a proof-of-concept web app to assist people in storyboarding. The target device is desktop and tablet (horizontal and landscape).

Here's a sample wireframe, and a non-interactive concept demo screenshot.

So far JQuery Mobile has been working excellent for me in terms of UI design. Heavier frameworks like Sencha Touch are too complex for my goal.

I need to have the renderer (WebGL canvas) visible at all times, while menus and options are selected/tweaked. I thought a splitview/multiview solution would be best, like on the wireframe I linked to. So I found:

  • Multiview (Stokkers) - seemed perfect, but required a very outdated fork of JQM. The project's been dead since 2012 and couldn't get it to load.
  • Splitview by asyraf9 - that plugin was so old that even the demo didn't work anymore.
  • SimpleSplitView - also from 2012, fortunately didn't require a custom JQM script but by following the instructions I never got the panels to float left or right. Also puts constraints on navigation.

As all of these projects are very outdated I'm not sure if there's even any point in troubleshooting them specifically.

So I'm asking all the experienced people here, how would you go around building a multiview? Any good plugins I'm missing? I'm a designer, not a coder, so the focus here is to be able to produce this quickly and efficiently without bloat, and then progressively iterate on that concept. Messy code is alright as long as it does the job and I can stash it somewhere in the corner without interference.

Having more than two panels (e.g. multiview solution) is most welcome, but even a two-panel splitview would be good; I can work around that.

This question is somewhat similar to "jquerymobile 1.3.X - Any latest plugins for splitview" from a year ago, but my requirements are not as specific and I need up-to-date solutions for an experience prototype. And the custom code in the answer is not what I need.

Thanks a bunch!

mgackowski
  • 13
  • 4

1 Answers1

0

I think I found a possible solution. Works so far.

I mimicked the HTML and custom CSS code (jqm-docs.css) found on the old http://demos.jquerymobile.com/1.2.0/ page. There's a bunch of additional styling there that's not part of the JQM package.

HTML structure:

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

I took the CSS file and stripped it down until I was left with this:

/*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;
    }

}

What I ended up with is a working, responsive splitview. A simple solution that took me very long to figure out. I believe it's because the HTML structure needs to be very specific (floating divs within content within pages), otherwise the CSS just gets ignored and overridden with the JQM framework. Hopefully this helps anyone experiencing the same trouble!

mgackowski
  • 13
  • 4