Page 49 - JqueryMobile_Manual
P. 49
49
<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>
Chapter 9
jQuery Mobile Collapsibles
Create a collapsible block of content
tryjqmob_collapsible.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Blocks</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
</div>
<div data-role="footer">
