Skip to content

Instantly share code, notes, and snippets.

@keirbowden

keirbowden/gist:6204673

Created August 11, 2013 12:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save keirbowden/6204673 to your computer and use it in GitHub Desktop.
Save keirbowden/6204673 to your computer and use it in GitHub Desktop.
Download ZIP
Visualforce/JQuery Mobile application to demonstrate swipe navigation
Raw
gistfile1.txt
<apex:page docType="html-5.0" applyHtmlTag="false" controller="LaunchpadController" showHeader="false" sidebar="false" standardStyleSheets="false">
<head>
<title>Swipe Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"></meta>
<!-- JQuery Mobile -->
<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"/>
<apex:styleSheet value="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.js"/>
</head>
<style>
.image
{
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
width:259px;
height:193px;
}
</style>
<body>
<!-- ------------------------ -->
<!-- -------- Page 1 -------- -->
<!-- ------------------------ -->
<div data-role="page" id="page1">
<div data-role="panel" id="aboutpanel" data-theme="b">
<h3>About</h3>
<p>Welcome to the Bob Buzzard swipe demo web application.</p>
<a href="#page1" data-role="button" data-rel="close">Close</a>
</div> <!-- /panel -->
<div data-role="header" class="header-large">
<h3>Swipe Demo</h3>
<a href="#aboutpanel" data-role="button" data-icon="info" data-iconpos="notext">About</a>
<a href="#page2" class="ui-btn-right" data-icon="arrow-r" data-iconpos="notext">Page 2</a>
</div><!-- /header -->
<div data-role="content" style="text-align:center">
<h1>Getting Ready</h1>
<div style="margin:auto"><apex:image styleclass="image" value="{!URLFOR($Resource.CCT, 'CCT1.jpg')}"/></div>
<p><caption>A quick chat with Nick Tran before taking the stage</caption></p>
</div> <!-- /content -->
</div> <!-- /page -->
<!-- ------------------------ -->
<!-- -------- Page 2 -------- -->
<!-- ------------------------ -->
<div data-role="page" id="page2">
<div data-role="header" class="header-large">
<h3>Swipe Demo</h3>
<a href="#page1" data-role="button" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext">Page1</a>
<a href="#page3" class="ui-btn-right" data-icon="arrow-r" data-iconpos="notext">Page 3</a>
</div><!-- /header -->
<div data-role="content" style="text-align:center">
<h1>It Begins</h1>
<div style="margin:auto"><apex:image styleclass="image" value="{!URLFOR($Resource.CCT, 'CCT2.jpg')}"/></div>
<p><caption>The first slide hits the screen</caption></p>
</div> <!-- /content -->
</div> <!-- /page -->
<!-- ------------------------ -->
<!-- -------- Page 3 -------- -->
<!-- ------------------------ -->
<div data-role="page" id="page3">
<div data-role="header" class="header-large">
<h3>Swipe Demo</h3>
<a href="#page2" data-role="button" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext">Page 2</a>
</div><!-- /header -->
<div data-role="content" style="text-align:center">
<h1>In the Zone</h1>
<div style="margin:auto"><apex:image styleclass="image" value="{!URLFOR($Resource.CCT, 'CCT3.jpg')}"/></div>
<p><caption>The slides are coming thick and fast</caption></p>
</div> <!-- /content -->
</div> <!-- /page -->
<script>
var $j = jQuery.noConflict();
$j(document).ready (function() {
$j.mobile.defaultPageTransition = "slide";
$j('#page1').on( "swiperight", function() {
$j('#aboutpanel').panel( "open" );
});
$j('#page1').on( "swipeleft", function() {
$j.mobile.changePage('#page2');
});
$j('#page2').on( "swipeleft", function() {
$j.mobile.changePage('#page3');
});
$j('#page2').on( "swiperight", function() {
$j.mobile.changePage('#page1', {reverse: true});
});
$j('#page3').on( "swiperight", function() {
$j.mobile.changePage('#page2', {reverse: true});
});
});
</script>
</body>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment