IPhone jQuery: how to implement Split mode in iPad using jQuery Mobile + phone gap in iPhone

I tried to implement split view using JQuery mobile Phone gap

sample code in index.html

  <head> <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /> <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /> <link rel="stylesheet" href="inc/resources/css/jquery.toastmessage.css" /> <script type="text/javascript" src="inc/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script> <script type="text/javascript" src="inc/phonegap-1.2.0.js"></script> </head> <body> <div data-role="page" data-theme="c"> <div data-role="header"> Mpbile Split View </div> <div data-role="content"> <!--- Left side view------> <div class="left-content"> <h3>lef hand content</h3> <ul data-role="listview"> <li>One</li> <li>One</li> <li>One</li> <li>One</li> </ul> </div> <!--- Right side view------> <div class="right-content"> <h3>Right hand content</h3> <ul data-role="listview"> <li>Two</li> <li>Two</li> <li>Two</li> <li>Two</li> </ul> </div> </div> </div> </body> </html> 

But it shows both views on the same page, one after the other, from top to bottom, as shown below.

enter image description here

I need two tables: split view one on the left side ( root view ) and another on the right side ( details view )

how is this possible using jQuery? thanks in advance

+6
source share
3 answers

You can use http://jeromeetienne.github.com/jquery-mobile-960/ and split it into these grids.

If you know 960.gs or any other grid css structure, it will be very easy for you. There is a demonstration of use on the specified site.

+1
source

Try using the multiview plugin.

It allows 1/2/3 panels side by side and Popover panels in jQuery Mobile. I have not tried it with PhoneGap (just ending with JQM 1.1), so if you try, let me know if it works (I should assume that).

Please use version 1.1 and JQM 1.1.multiview, which requires several settings.

I am currently making a new README and a sample site. Must be in a few days.

+1
source

Try simplesplitview

http://simplesplitview.sourceforge.net/

Its best jquerymobile splitview and damn is easy to implement

+1
source

Source: https://habr.com/ru/post/916663/


All Articles