如何在jQuery Mobile 1.3中实现可滚动的内容窗格
[英]How to realize a scrollable content pane in jQuery Mobile 1.3
问题描述
我使用网格模拟某种splitview，我想在左侧和listview一起使用以显示一些导航按钮，在右侧显示一些内容。
现在列表视图真的很长，我希望它可以滚动。 因此，当内容窗格保持全屏高度（或稍后获得其自己的可滚动内容窗格）时，列表视图窗格应该是可滚动的。 如何使用jQM实现这一目标？ 日Thnx！
1 个解决方案
解决方案1
2 2013-05-16 10:38:55
解
你想要什么不能轻易做到。 无论您在哪个平台上工作，几乎不可能创建2个可滚动窗格，并且每个窗格都可以单独工作，特别是在移动设备上。 但总是有一个解决方法。
工作示例： http ： //example.gajotres.net/iscrollview/
我不能创建一个jsFiddle，因为iscrollview在该环境中不起作用。 如果您iscrollview知道， iscrollview是jQuery移动插件创建的iscroll包装器。 Iscroll是一个插件创建，为移动浏览器提供可滚动内容。
此实现使用固定浮动右面板。 虽然页面的其余部分是可滚动的，但此面板会给您一种幻觉，就像它固定在页面的右侧一样。
经过测试
- Windows Firefox
- Windows Chrome
- Android Chrome
- 堆栈三星Galaxy S3 Android浏览器
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />
<style>
#iscroll-listview {
margin: 0 !important;
}
.right-pane {
position: fixed;
width: 50%;
height: 100%;
background: red;
top:0;
color: white;
margin-top: 40px;
}
</style>
<script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>
<script src="http://www.fajrunt.org/js/iscroll.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" class="index-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
<h1>INDEX PAGE</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" >
<div class="example-wrapper" data-iscroll>
<p>some content that will be scrolled</p>
<p>Some more content that will be scrolled</p>
<ul data-role="listview" id="iscroll-listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
</div>
</div>
<div class="ui-block-b">
<div class="right-pane">
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
</div>
</div>
</div><!-- /grid-a -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
<h1>My Footer</h1>
</div>
</div>
</body>
</html>
最后的笔记
如果您想了解有关iScroll + iScrollView的更多信息，以及它们如何使用工作示例，请查看本文 。
Android上的jQuery Mobile 1.3面板
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.