I Have implemented Split view model in Jquery mobile + phone gap by following the instructions in the link:
http://www.youtube.com/watch?v=qnNyHPWRz-Y .
Its very easy to implement a split view for iPad in JQuery mobile
and it takes 2-3 minuits to implement a split view using jQuery mobile+ phone gap in iPad.
<body>
<div data-role="page" data-theme="e" data-content-theme="d">
<div data-role="header">
JQuery Split View using link http://www.youtube.com/watch?v=qnNyHPWRz-Y
</div>
<div data-role="content">
<!--- Right side view------>
<div class="content-secondary">
<h3>Root View</h3>
<ul data-role="listview">
<li>Ashford Ridge Mine</li>
<li>Ashland Gold Mine</li>
<li>Brodford mine</li>
<li>Big Horn Mine</li>
<li>Elko pass</li>
<li>Emerad pine Gold</li>
</ul>
</div>
<!--- Right side view------>
<div class="content-primary">
<h3>Details View</h3>
<p>
Detail VIEWS goes here......
</p>
</div>
</div>
</div>
</body>
I need ti implement did select method to the left side root view
as when we click a row in left side table it to display corresponding selected row's information and details in right side details view.
![enter image description here][1]
But how to implement did select method to the left side root view
to display corresponding selected row's information and details in right side details view in the form of table views.
Or please provide me a good tutorial for Split view using jQuery mobile phone gap in iPhone
Other way is to show and hide the div using css. There could also a better way to do it. by my 2cents!!
splitwin.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<body>
<div data-role="page" data-theme="e" data-content-theme="d">
<div data-role="header">
JQuery Split View using link http://www.youtube.com/watch?v=qnNyHPWRz-Y
</div>
<div data-role="content">
<!--- Right side view------>
<div class="content-secondary">
<h3>Root View</h3>
<ul data-role="listview">
<li>
<a href="#" id="Ashford">Ashford Ridge Mine</a>
</li>
<li>
<a href="#" id="Ashland">Ashland Gold Mine</a>
</li>
<li>
Brodford mine
</li>
<li>
Big Horn Mine
</li>
<li>
Elko pass
</li>
<li>
Emerad pine Gold
</li>
</ul>
</div>
<!--- Right side view------>
<div class="content-primary">
<h3>Details View</h3>
<p>
Detail VIEWS goes here......
<div id="link1" style="display:none">
Clicked
Ashford Ridge Mine
</div>
<div id="link2" style="display:none">
Clicked
Ashland Gold Mine
</div>
</p>
</div>
</div>
</div>
</body>
</body>
</html>
demo.js
$('a#Ashford').live('click', function() {
$("div#link2").hide();
$("div#link1").show();
});
$('a#Ashland').live('click', function() {
$("div#link1").hide();
$("div#link2").show();
});