I had tried to implement a split view
using the 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 view on same page one by one top to bottom as shown bellow
I need two tables as split view
one in left side (root view
) and other in right side (details view
)
how is it possible using jQuery? thanks in advance
You can use http://jeromeetienne.github.com/jquery-mobile-960/ and split it with that grids.
If you know 960.gs or any other css grid framework it will be very easy for you. There is demo of usage at mentioned site.
Try using my multiview plugin.
It allows 1/2/3 panels side-by-side plus popover panels in Jquery Mobile. I have not tried it with PhoneGap (just finishing for JQM 1.1), so if you give it a try, please let me know if it works (it should I guess).
Please use the 1.1 version and the JQM 1.1.multiview, which needs a few tweaks to get working.
I'm currently doing the new README and sample site. Should be up in a few days.
Try simplesplitview
http://simplesplitview.sourceforge.net/
Its the best jquerymobile splitview and damn easy to implement
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With