0

我对 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>...
4

2 回答 2

0

这对我有用。$( 文档 ).on( "pageinit", "[data-role='page'].uebungen_pages", 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" );
    }


 });
于 2014-06-23T11:50:35.587 回答
0

你试过这个方法吗？ http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html

它似乎至少适用于 HTML 页面

于 2013-05-17T18:56:49.587 回答