Как реализовать прокручиваемую панель контента в jQuery Mobile 1.3
Я использую сетку для имитации некоего вида splitview, где я хочу использовать левую сторону вместе со списком, чтобы показать некоторые кнопки навигации, и правую сторону, чтобы показать некоторое содержимое.
теперь просмотр списка очень длинный, и я хочу, чтобы его можно было прокручивать. поэтому панель просмотра списка должна быть прокручиваемой, в то время как панель контента остается в полноэкранном режиме (или позже получает собственную прокручиваемую панель контента). Как это возможно с JQM? Thnx!
1 ответ
Решение
То, что вы хотите, не может быть сделано так легко. Независимо от того, на какой платформе вы работаете, практически невозможно создать 2 прокручиваемые панели, и каждая из них работает отдельно, особенно на мобильных устройствах. Но, как всегда, есть обходной путь.
Рабочий пример: http://example.gajotres.net/iscrollview/
Я не могу создать для вас jsFiddle, потому что iscrollview не работает в этой среде. Если вы уже не знаете, iscrollview это мобильный плагин JQuery создать в качестве оболочки iscroll, Iscroll - это плагин, создающий прокручиваемый контент для мобильных браузеров.
Эта реализация использует фиксированную плавающую правую панель. Пока остальная часть страницы прокручивается, эта панель создаст иллюзию, будто она закреплена на правой стороне страницы.
Проверено на
- Windows Firefox
- Windows Chrome
- Android Chrome
- Стек Samsung 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, как они работают с рабочими примерами, взгляните на эту статью.