当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to make ui content fixed while the panel scrolling on jquery mobile

问题描述:

I've been looking for this thread on the Internet for almost two months, but I didn't find anything.

Here is my code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

</head>

<body>

<div data-role="page" id="pageone">

<div data-role="panel" id="myPanelDefault">

<h2>Panel Header</h2>

<p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>

<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>

</div>

<div data-role="panel" id="myPanelFixed" data-position-fixed="true">

<h2>Panel Header</h2>

<p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>

<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>

</div>

<div data-role="header">

<h1>Page Header</h1>

</div>

<div data-role="main" class="ui-content">

<p>Click on both buttons and start to scroll the page.</p>

<a href="#myPanelDefault" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Default Panel</a>

<a href="#myPanelFixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel with data-position-fixed="true"</a>

<p><b>Tip:</b> To see the effect of the data-position-fixed="true" attribute, try to resize the window if the scrollbar is not available.</p>

<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p><br>

</div>

<div data-role="footer">

<h1>Page Footer</h1>

</div>

</div>

</body>

</html>

The above code is a demo of making the panel fixed when the panel is open. I wish to know how to make the content or ui-content fixed while the panel is open. So, the ui-content stays fixed even the panel is scrolled up or down.

Thank you,

Zamm.

分享给朋友:
您可能感兴趣的文章:
随机阅读: