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"> <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> <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.
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
Vijay source share