Use jquery Mobile to do slideshow playback effect steps _jquery

Source: Internet
Author: User
With jquery mobile, you can easily achieve a slideshow, as explained below.
1, the introduction of the relevant Jqury Mobile class library
Copy Code code as follows:

<! DOCTYPE html>
<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, each need to play the slide of the basic structure of the page
Copy Code code as follows:

<div data-role= "page" id= "Slide1" Data-theme= "a" data-transition= "Fade" >
<div data-role= "Header" >
</div>
<div data-role= "Content" >
</div>
</div>

3, followed by each slide back and forth between the navigation, the code is
Copy Code code as follows:

var changeslide = function (toslide) {
if (toslide.length)
$.mobile.changepage (Toslide, {transition:toSlide.jqmData (' transition ')});
};
Back to Home
var gethomeslide = function () {
Return $ (': Jqmdata (role=page): a ");
};
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;
};
Get a previous page
var getprevslide = function (slide) {
Return Slide.prev (': Jqmdata (role=page) ');
};
Skip to Previous page
var goBack = function () {
Changeslide (Getprevslide ($.mobile.activepage));
return false;
};

Note that the $.mobile.changepage method is used to achieve the page jump, and the jump is with
Jump effect parameters, such as:
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 and an ID of "search"
$.mobile.changepage ("searchresults.php", {
Type: "Post",
Data: $ ("Form#search"). Serialize ()
});
and return $ (': Jqmdata (role=page): a); in fact, Jqmdata is instead
The data selector for jquery.
4, there is a right and left arrow is the keyboard keys to deal with, such as
Copy Code code 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, to the Navigation bar processing
When each slide is loaded, the navigation bar is automatically loaded into the footer part of the page,
This is to be loaded before ' pagebeforecreate,
Copy Code code as follows:

$ (': Jqmdata (role=page) '). Live (' Pagebeforecreate ', function (event) {
var slide = $ (this);
Find Footer
var footer = $ (": Jqmdata (Role=footer)", slide);
if (!footer.length) {
Add to bottom of 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> ');
Before processing, the click button on the Back page
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 before, after the homepage
var prevslide = getprevslide (slide), homeslide = Gethomeslide (), nextslide = getnextslide (slide);
If there is a previous page, there is a way to set the style that can be clicked
if (prevslide.length) {
Backbutton.attr (' href ', ' # ' + prevslide.attr (' id '));
Homebutton.attr (' href ', ' # ' + homeslide.attr (' id '))
}else{
Disable its buttons
Backbutton.addclass (' ui-disabled ');
Homebutton.addclass (' ui-disabled ')
};
Is there a later page
if (nextslide.length) {
Forwardbutton.attr (' href ', ' # ' + nextslide.attr (' id '))
}else{
Disable its buttons
Forwardbutton.addclass (' ui-disabled ')
};
//.........
});

6, according to the situation loading pictures
If a lot of slides, should not load all the pictures, should first load small pictures, and can be based on the size of the screen to judge what pictures, such as:
Copy Code code as follows:

Data-small= "..."
Data-large= "..."/>

judge how to use
Copy Code code as follows:

var loadimages = function (slide) {
var width = $ (window). width ();
Use picture size to determine the size of the screen
var attrname = width > 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);
});
};

The whole operation effect see:
Http://moretechtips.googlecode.com/svn/mobile-presentation/index.htm

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.