This repository was archived by the owner on Oct 8, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Expand file tree
/
Copy pathswipe-page.js
More file actions
63 lines (53 loc) · 2.03 KB
/
swipe-page.js
File metadata and controls
63 lines (53 loc) · 2.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
$( document ).on( "pagecreate", "[data-role='page'].demo-page", function() {
var page = "#" + $( this ).attr( "id" ),
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
next = $( this ).jqmData( "next" ),
// Get the filename of the previous page. We stored that in the data-prev
// attribute in the original markup.
prev = $( this ).jqmData( "prev" );
// Check if we did set the data-next attribute
if ( next ) {
// Prefetch the next page
$( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function( event ) {
// Swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if ( event.target === $( page )[ 0 ] ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", { transition: "slide" });
}
});
// Navigate to next page when the "next" button is clicked
$( ".control .next", page ).on( "click", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", { transition: "slide" } );
});
}
// Disable the "next" button if there is no next page
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// The same for the previous page (we set data-dom-cache="true" so there is
// no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function( event ) {
// Swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if ( event.target === $( page )[ 0 ] ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
transition: "slide",
reverse: true
});
}
});
$( ".control .prev", page ).on( "click", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
transition: "slide",
reverse: true
});
});
}
else {
$( ".control .prev", page ).addClass( "ui-disabled" );
}
});