jQuery mobile framework provides easily themeable, HTML5-based interface with support for pages transitions, therefore it would be very easy to create simple web presentations that will work on all popular smartphone and desktop platforms.
First, check out the demo, then let's walk through the building blocks of this sample presentation.
HTML5
Using a Multi-page Template, we will place all slides contents in one HTML5 page as multiple mobile-pages.The mobile page is just a DIV element with a data-role attribute of "page". Each page element will have a unique ID (id="slide1") to be linked internally like (href='#slide1').
The HTML page references to jQuery, jQuery Mobile and the mobile theme CSS in the head as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title> jQuery Mobile Presentation</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Mobile-page for each slide will look like this :
<div data-role="page" id="slide1" data-theme="a" data-transition="fade">
<div data-role="header">
<h1>Slide 1</h1>
</div>
<div data-role="content">
</div>
</div>
- Note that mobile-pages may contain a header but should not have a footer which will be used for navigation bar.
- jQuery mobile lets you define a page transition in the anchor that links to it, but for this presentation, we will set the desired transition on the slide div using the same attribute 'data-transition'.
Navigation Functions
Few simple functions are for moving slides forward, backward or to the home slide as follows.
// change slide with transition set in data-transition
var changeSlide = function(toSlide){
if(toSlide.length) $.mobile.changePage( toSlide, { transition: toSlide.jqmData('transition') } );
};
// get home slide
var getHomeSlide = function(){
return $(':jqmData(role=page):first');
};
// go home
var goHome = function(){
changeSlide( getHomeSlide() );
return false;
};
// get next slide
var getNextSlide = function(slide){
return slide.next(':jqmData(role=page)');
};
// go next slide
var goForward = function(){
changeSlide( getNextSlide($.mobile.activePage) );
return false;
};
// get previous slide
var getPrevSlide = function(slide){
return slide.prev(':jqmData(role=page)');
};
// go previous slide
var goBack = function(){
changeSlide( getPrevSlide($.mobile.activePage) );
return false;
};
- $.mobile.changePage is used to go to requested slide with the transition set in 'data-transition' attribute.
- Note that, $.mobile.activePage is used to get a reference to current mobile-page(slide).
- Then,
jqmData selector combined with :first selector
are used to get home slide,
or combined with traversing methods (next &
prev) to get next/previous slide.
* jqmData is jQuery mobile replacement for jQuery data.
Handling Swiping and Arrow Keys
We need to handle these events: swipe left/right, pressing left/right arrows.$(document).keydown(function(e) {
if(e.keyCode ==39) goForward(); //right
else if(e.keyCode ==37) goBack(); //left
})
.bind("swiperight", goForward )
.bind("swipeleft", goBack );
Inserting Navigation Bar
A navigation bar will be dynamically inserted in the footer of every slide with forward, home and back buttons.Navigation bar is crated on 'pagebeforecreate' event, so we can manipulate the mobile-page before default widgets are auto-initialized.
$(':jqmData(role=page)').live( 'pagebeforecreate',function(event){
var slide = $(this);
// find footer or add it
var footer = $(":jqmData(role=footer)", slide );
if( !footer.length ) {
footer = $('<div data-role="footer" data-position="fixed" data-fullscreen="true"/>').appendTo(slide);
};
// add nav. bar
footer.html('<div data-role="navbar">'+
'<ul>'+
'<li><a data-icon="back"></a></li>'+
'<li><a data-icon="home"></a></li>'+
'<li><a data-icon="forward"></a></li>' +
'</ul>'+
'</div>');
// Handle nav. bar clicks
var backButton = $(':jqmData(icon=back)', footer).click( goBack );
var homeButton = $(':jqmData(icon=home)', footer).click( goHome );
var forwardButton = $(':jqmData(icon=forward)', footer).click( goForward );
// get home, next and previous slides
var prevSlide = getPrevSlide( slide ), homeSlide = getHomeSlide(), nextSlide = getNextSlide( slide ) ;
// prev slide exists?
if( prevSlide.length ) {
// set href to slide ID
backButton.attr('href', '#'+ prevSlide.attr('id') );
homeButton.attr('href', '#'+ homeSlide.attr('id') )
}else{
// disable buttons otherwise
backButton.addClass('ui-disabled');
homeButton.addClass('ui-disabled')
};
// next slide exists?
if( nextSlide.length ) {
// set href to slide ID
forwardButton.attr('href', '#'+ nextSlide.attr('id') )
}else{
// disable button otherwise
forwardButton.addClass('ui-disabled')
};
//.........
});
- First, The footer is either found in a slide or added to it.
- Afterwards, nav. bar is inserted in footer with 3 buttons: back, home and forward.
- Then, binding clicks events of these buttons to the 3 navigation functions: goBack, goHome and goForward.
- Finally, Checking if their is a previous slide to set 'href' of back and home buttons. Otherwise, 'ui-disabled' class is added to the buttons to look disabled. Also, doing the same on forward button.
Responsive Lazy-Loading
Since we placed all slides contents in one HTML page, we should not let the browser load all images on the first slide. Therefore, we need lazy-loading.In addition, we need to load images in a responsive way by delivering smaller images for small screens.
We start by setting images source to a 1-pixel gif, set the large image(>480px wide) source in 'data-large' attribute and smaller image in 'data-small'.
<img src="empty.gif" class="photo"
data-small="..."
data-large="..."/>
Then, we call loadImages() to load the appropriate size on 'pagebeforecreate' event of every slide.
Similarly, loadImages() is called on the next slide after 3 seconds to prepare the images in it for smooth transition.
var loadImages = function(slide) {
var width = $(window).width();
// use large image for screens bigger than 480px, otherwise use small size
var attrName = width > 480? 'large' : 'small';
$('img:jqmData('+attrName+')', slide).each(function(){
var img = $(this);
var source = img.jqmData(attrName);
// set img src with large/small image then remove data
if(source) img.attr('src', source).jqmRemoveData(attrName);
});
};
Also, set images max-width in CSS, so, small images will scale to fit smaller screens.
img{
max-width:100%
}
If you find this tutorial interesting, you may also check Dynamic Page Generation in jQuery Mobile.
Web developer, jQuery plugin author, social media fan and Technology Blogger.
Nice demo Mike
Thanks @jQuery4u, Glad you like it
A good use for jQuery Mobile! Definitely a great way to build a presentation.
Thanks @Joseph for your feedback :)
Good start, but .live() has been deprecated. The new/current approach is to use $(document).on() and specify three parameters (event delegation).
Thank you Anonymous for the heads-up!
Very good article thank you. Any further reading/examples on the same topic of jquery presentations for mobiles? Thank you!