我想在Jquery mobile中测试来回按钮。就在我点击它的时候，它返回我前一页，然后它响应给定链接的下一页。请告诉我如何使用javascript在html上执行此操作。
的script.js
$(window).on("navigate", function(event, data) {
var direction = data.state.direction;
if (direction == 'back') {
alert('Going back');
}
if (direction == 'forward') {
alert('Going forward');
}
});
$(document).on('click', '.showNextPage', function() {
$.mobile.navigate("#second", {
transition: "slide"
});
});
$(document).on('click', '.showPrevPage', function() {
$.mobile.navigate("#index", {
transition: "slide"
});
});
第一页html：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a class="ui-btn-right showNextPage">Next</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
<a class="ui-btn-left showPrevPage">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
第二页html：
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Basic HTML Sample Page</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">
<CENTER>
<H1>A Simple Sample Web Page</H1>
<IMG SRC="http://sheldonbrown.com/images/scb_eagle_contact.jpeg">
<H4>By Sheldon Brown</H4>
<H2>Demonstrating a few HTML features</H2>
</CENTER>
HTML is really a very simple language. It consists of ordinary text, with commands that are enclosed by "<" and ">" characters, or bewteen an "&" and a ";".
<P>
You don't really need to know much HTML to create a page, because you can copy bits of HTML from other pages that do what you want, then change the text!
<P>
This page shows on the left as it appears in your browser, and the corresponding HTML code appears on the right. The HTML commands are linked to explanations of what they do.
<H3>Line Breaks</H3>
HTML doesn't normally use line breaks for ordinary text. A white space of any size is treated as a single space. This is because the author of the page has no way of knowing the size of the reader's screen, or what size type they will have their browser set for.
<P>
If you want to put a line break at a particular place, you can use the "<BR>" command, or, for a paragraph break, the "
<P>" command, which will insert a blank line. The heading command ("<4></4>") puts a blank line above and below the heading text.
<H4>Starting and Stopping Commands</H4>
Most HTML commands come in pairs: for example, "
<H4>" marks the beginning of a size 4 heading, and "</H4>
" marks the end of it. The closing command is always the same as the opening command, except for the addition of the "/".
<P>
Modifiers are sometimes included along with the basic command, inside the opening command's < >. The modifier does not need to be repeated in the closing command.
<H1>This is a size "1" heading</H1>
<H2>This is a size "2" heading</H2>
<H3>This is a size "3" heading</H3>
<H4>This is a size "4" heading</H4>
<H5>This is a size "5" heading</H5>
<H6>This is a size "6" heading</H6>
<center>
<H4>Copyright © 1997, by
<A HREF="http://sheldonbrown.com/index.html">Sheldon Brown</A>
</H4>
If you would like to make a link or bookmark to this page, the URL is:<BR>http://sheldonbrown.com/web_sample1.html
</body>
</html>