Skip to content

Instantly share code, notes, and snippets.

@mrtony

mrtony/jsbin.koyuja.html

Created July 3, 2014 00:36
Show Gist options
  • Save mrtony/50f8ea304167139d1bde to your computer and use it in GitHub Desktop.
Save mrtony/50f8ea304167139d1bde to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.koyuja.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<title>JQM latest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="p1">
<div data-role="header" data-position="fixed">
<h1>Header - Page 1</h1>
</div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="p2">
<div data-role="popup" id="about" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:300px;" class="ui-corner-all" data-history="false">
<div data-role="header" class="ui-header ui-bar-c">
<h1>About Author</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<p>Demonstration was created by <b>Omar</b> for <a href="#">StackOverflow.com</a>.
<br/>
<br/>For more examples on jQuery Mobile, click the button below.</p>
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 85%"><a href="http://stackoverflow.com/users/1771795/omar" data-role="button" data-theme="c" data-icon="star" target="_blank">Profile</a>
</div>
<div class="ui-block-b" style="width: 15%; margin-top:9px"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-rel="back">Close</a>
</div>
</div>
</div>
</div>
<div data-role="header" data-position="fixed"> <a href="#about" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="flip" data-icon="info" data-theme="b">About</a>
<h1>Header - Page 2</h1>
</div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Raw
jsbin.koyuja.js
$('#p2').on('pageshow', function () {
setTimeout(function () {
$('#about').popup('open', {
transition: 'pop'
});
}, 1000);
});
setTimeout(function () {
$(':mobile-pagecontainer').pagecontainer('change', '#p2', {
transition: 'flip',
changeHash: false,
reverse: true,
showLoadMsg: true
});
}, 1000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment