我是jQuery的新手，只有HTML5和CSS的基本技能。我一直试图在不使用按钮或图标的情况下创建滑动导航。我发现并尝试使用的每个代码都失败了。请帮忙。
这是最后一次上传到服务器 - dtc-wsuv.org/jcohen/strings
代码 -
<!DOCTYPE html>
<html>
<head>
<!-- character sets for english-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Strings</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!-- Settings - View as App -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Icons -->
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch-icon- 144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon- 114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon- 72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/apple-touch-icon- precomposed.png">
<!-- Startup Images -->
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="images/startup-ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="images/startup-ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="images/startup-iphone.png" media="screen and (max-device-width: 320px)" />
<!-- Jquery & Stylesheets -->
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- styles.css link-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile- 1.0.min.js"></script>
<script>
$("#home").live( 'pageinit',function(event) {
//Add Back Button To pages
$.mobile.page.prototype.options.addBackBtn = "true";
$.mobile.page.prototype.options.backBtnText = "Go Back";
$('li').each(function(index) {
var elementId = $(this).attr("id");
var rel = $(this).attr("rel");
var text = $(this).text();
elementId = '#'+elementId;
var link = elementId + '.php';
//Add event listener for each li
$(function() {
$(elementId).live('swipe', function(event) {
//Load page that you swiped on.
$.mobile.changePage( elementId, {transition: "slideup"} );
});
});
});
});
</script>
<div data-role="page" id="home">
<img src="images/homebkg.png">
<div data-role="content">
<ul data-role="listview" id="swipelist">
<li id='lomax'><a href="">lomax</li>
<li id='mctell'><a href="">mctell</li>
<li id='leadbelly'><a href="">leadbelly</li>
<li id='hurt'><a href="">hurt</li>
<li id='cotten'><a href="">cotten</li>
<li id='sonhouse'><a href="">sonhouse</li>
</ul>
</div>
</div>
<div data-role="page" id="lomax">
<div data-role="content"> <!-- content -->
<div class="bio">
<img src="images/jlomax.png">
<p>
The preservation of early American folk music...
</p>
</div>
</div>
<div class="audioplayer">
<audio controls="controls">
<source src="audio/lomax/all-the-pretty-little-horses.mp3" type="audio/mpeg">
<source src="audio/ostinato_i.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<div data-role="page" id="mctell">
<div data-role="content">
<div class="bio">
<img src="images/mctell.png">
<p>
William Samuel McTier (1898-1959, Thomson, GA) studied music from a young age...
</p>
</div>
</div>
<div class="audioplayer">
<audio controls="controls">
<source src="audio/mctell/bollweevil.mp3" type="audio/mpeg">
<source src="audio/ostinato_i.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</div>...
答案 0 :(得分：0)
你试过这种方法吗？ http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html
它似乎至少适用于HTML页面
答案 1 :(得分：0)
这对我有用。 $（文件）.on（＆＃34; pageinit＆＃34;，＆＃34; [data-role =＆＃39; page＆＃39;]。uebungen_pages＆＃34;，function（）{
var page = "#" + $( this ).attr( "id" ),
// Get the filename of the next page that we stored in the data-next attribute
next = $( this ).jqmData( "next" ),
// Get the filename of the previous page that we stored in the data-prev attribute
prev = $( this ).jqmData( "prev" );
/* ############## Pause start/stop ###########################*/
// Check if we did set the data-next attribute
if ( next ) {
// Prefetch the next page
$.mobile.loadPage( "#"+next);
// Navigate to next page on swipe left
$( document ).off("swiperight", page).off("swipeleft", page).on( "swipeleft", page, function() {
$.mobile.changePage( "#"+next, { transition: "slide" });
});
/*
// Navigate to next page when the "next" button is clicked
$( ".control .next", page ).on( "click", function() {
$.mobile.changePage( 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 ).off("swiperight", page).on( "swiperight", page, function() {
$.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
});
$( ".control .prev", page ).on( "click", function() {
$.mobile.changePage( '#'+prev , { transition: "slide", reverse: true } );
});
}
else {
$( ".control .prev", page ).addClass( "ui-disabled" );
}
});