Home > Developer > JavaScript
Using jquery mobile, you can easily achieve the playback effect of a magic lamp.
1. Introduce the relevant jqury mobile class library
Copy codeThe Code is 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>
2. Basic Structure of each page for playback slides
Copy codeThe Code is as follows:
<Div data-role = "page" id = "slide1" data-theme = "a" data-transition = "fade">
<Div data-role = "header">
<H1> Slide 1 </Div>
<Div data-role = "content">
</Div>
</Div>
3. The next step is the back-and-forth navigation between each slide. The code is:
Copy codeThe Code is as follows:
Var changeSlide = function (toSlide ){
If (toSlide. length)
$. Mobile. changePage (toSlide, {transition: toSlide. jqmData ('transition ')});
};
// Return to the home page
Var getHomeSlide = function (){
Return $ (': jqmData (role = page): first ');
};
// Go home
Var goHome = function (){
ChangeSlide (getHomeSlide ());
Return false;
};
// To the next page
Var getNextSlide = function (slide ){
Return slide. next (': jqmData (role = page )');
};
// To the next page
Var goForward = function (){
ChangeSlide (getNextSlide ($. mobile. activePage ));
Return false;
};
// Obtain the previous page
Var getPrevSlide = function (slide ){
Return slide. prev (': jqmData (role = page )');
};
// Jump to the previous page
Var goBack = function (){
ChangeSlide (getPrevSlide ($. mobile. activePage ));
Return false;
};
Note that the $. mobile. changePage method is used to redirect pages.
Jump effect parameters, such:
// Transition to the "about us" page with a slideup transition
$. Mobile. changePage ("about/us.html", {transition: "slideup "});
// Transition to the "search results" page, using data from a form with an id of "search"
$. Mobile. changePage ("searchresults. php ",{
Type: "post ",
Data: $ ("form # search"). serialize ()
});
In return $ (': jqmData (role = page): first');, jqmData is replaced
Jquery's data selector.
4. Another option is to process the left and right arrows with the keyboard buttons, for example:
Copy codeThe Code is as follows:
$ (Document). keydown (function (e ){
If (e. keyCode = 39) goForward (); // right
Else if (e. keyCode = 37) goBack (); // left
})
. Bind ("swiperight", goForward)
. Bind ("swipeleft", goBack );
5. Handling navigation bar
When each slide is loaded, the navigation bar is automatically loaded to the footer part of the page,
This should be loaded before 'pagebeforecreate,
Copy codeThe Code is as follows:
$ (': JqmData (role = page)'). live ('pagebeforecreate', function (event ){
Var slide = $ (this );
// Locate footer
Var footer = $ (": jqmData (role = footer)", slide );
If (! Footer. length ){
// Add to the bottom of the page
Footer = $ ('<div data-role = "footer" data-position = "fixed" data-fullscreen = "true"/>'). appendTo (slide );
};
// Add nav. bar
Footer.html ('<div data-role = "navbar">' +
'[List]' +
'[*] <A data-icon = "back"> </a>
'+
'[*] <A data-icon = "home"> </a>
'+
'[*] <A data-icon = "forward"> </a>
'+
'[/List]' +
'</Div> ');
// Click the button on the back page before processing
Var backButton = $ (': jqmData (icon = back)', footer). click (goBack );
Var homeButton = $ (': jqmData (icon = home)', footer). click (goHome );
Var forwardButton = $ (': jqmData (icon = forward)', footer). click (goForward );
// Home Page
Var prevSlide = getPrevSlide (slide), homeSlide = getHomeSlide (), nextSlide = getNextSlide (slide );
// Whether the previous page exists. If yes, set the style that can be clicked.
If (prevSlide. length ){
BackButton. attr ('href ',' # '+ prevSlide. attr ('id '));
HomeButton. attr ('href ',' # '+ homeSlide. attr ('id '))
} Else {
// Disable the button
BackButton. addClass ('ui-disabled ');
HomeButton. addClass ('ui-disabled ')
};
// Whether the last page exists
If (nextSlide. length ){
ForwardButton. attr ('href ',' # '+ nextSlide. attr ('id '))
} Else {
// Disable the button
ForwardButton. addClass ('ui-disabled ')
};
//.........
});
6. Attach images as needed
If there are many slides, you should not load all the images. You should first load a small image and determine which image to use based on the screen size. For example:
Copy codeThe Code is as follows:
Data-small = "..."
Data-large = "..."/>
Determine usage:
Copy codeThe Code is as follows:
Var loadImages = function (slide ){
Var width = $ (window). width ();
// Determine the image size based on the screen size
Var attrName = width & gt; 480? 'Large': 'small ';
$ ('Img: jqmData ('+ attrName +') ', slide). each (function (){
Var img = $ (this );
Var source = img. jqmData (attrName );
If (source) img. attr ('src', source). jqmRemoveData (attrName );
});
};
For the overall running effect, see:
Http://moretechtips.googlecode.com/svn/mobile-presentation/index.htm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
