我已经按照链接中的说明在Jquery mobile + phone gap中实现了Split view model：
http://www.youtube.com/watch?v=qnNyHPWRz-Y .
在JQuery移动版中实现iPad的拆分视图非常容易
实施split view using jQuery mobile+ phone gap in iPad需要 2-3 分钟.
<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>
我需要ti实现确实选择方法到左侧根视图
作为when we click a row in left side table it to display corresponding selected row's information and details in right side details view.
！[在此输入图像描述][1]但how to implement did select method to the left side root view
到display corresponding selected row's information and details in right side details view in the form of table views.
或者please provide me a good tutorial for Split view using jQuery mobile phone gap in iPhone
另一种方法是使用 css 显示和隐藏div。还可以有更好的方法。用我的2美分！！
斯普利特温.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>
演示.js
$('a#Ashford').live('click', function() {
$("div#link2").hide();
$("div#link1").show();
});
$('a#Ashland').live('click', function() {
$("div#link1").hide();
$("div#link2").show();
});
试试这个...
$('ul[data-role="listview"] li').click(function() {
var li_text = $(this).text();
$.ajax({
url:'<url to get detail from li text>',
data : 'data='+li_text,
success: function(result) {
$('.content-primary').find('p').get(0).html(result);
} // <-- add this
});
});