Vorherige Seite Knopf

Question

Ich versuche, einen Weg zu schaffen zwischen den Seiten mit Zurück & Weiter Tasten zu navigieren. Die Tasten wurden mit Bootstrap und font-awesome Icons gemacht, die hier gesehen werden: Live Example

Die Software verwendet wird, ist ein Comic Reader

Ich habe es geschafft, eine nächste Seite Schaltfläche mit dem folgenden Code zu erstellen :

<a href="<?php echo $chapter->next_page($current_page); ?>" onClick="return nextPage();" > 
    <button type="button" class="btn btn-info" id="next-page"><i class="fa fa-chevron-right"></i></button> 
</a> 

wie würde ich mich über eine zurück Taste Seite erstellen, die auf die gleiche Weise wie die aktuelle nächste Seite tut funktioniert?

Ich habe history.goback versucht, aber das ist genau das, geht die vorherige Seite nach Ihrer Geschichte zurück.

Vielen Dank,

Edit: Hinzugefügt mehr Details unten als Antwort

Answer 1

function LoadPage(i){ 
 
    $('#page').html(i).attr('page',i); 
 
    href='/pages/'+i+'.php'; 
 
    $('#loaded').load(href); 
 
} 
 

 
$('#next').click(function(){ 
 
    var n = parseInt($('#page').attr('page')); 
 
    var m = $('#page').attr('maxpage'); 
 
    n++; 
 
    if (n < m) { 
 
    LoadPage(n); 
 
    } 
 
}) 
 

 
$('#prev').click(function(){ 
 
    var n = parseInt($('#page').attr('page')); 
 
    n--; 
 
    if (n > 0) { 
 
    LoadPage(n); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="prev">&lt;&lt;</button> 
 
<span id="page" page="2" maxpage="10">2</span> 
 
<button id="next">&gt;&gt;</button> 
 
<div id="loaded">0</div>

Answer 2

Sie können es über einfaches JavaScript-Code wie folgt vorgehen:

HTML:

<a href="javascript:void(0);" onClick="return prevPage();" >Prev</a> 

JavaScript:

function prevPage(){ 
    //assuming that the current page count will always be at the end of URL 
    // /reader/read/test/en/0/0/page/10 
    //here current page number is 10 
    var currentPage = window.location.pathname.split("page/")[1]; 
    var currentPage = parseInt(currentPage); 
    var prevPage = 1; 
    if(currentPage > 1) 
     prevPage = currentPage - 1; 
    else 
     return; //return if we are on 1st page 

    window.location.href = window.location.href.replace(currentPage,prevPage); 
} 

Answer 3

Nachdem an der next_page Funktion im Kapitel Modell suchte, konnte ich eine prev_page Funktion mit dem gleichen Format erstellen. Ich würde gerne sicherstellen, ob dies der richtige Weg ist, dieses Problem anzugehen. Ich bin ziemlich neu in PHP.

Die ursprüngliche next_page Funktion:

/** 
     * Returns the URL for the next page in the same chapter. It's used for 
     * page-change in systems that don't support JavaScript. 
     * 
     * @author Woxxy 
     * @todo this function has a quite rough method to work, though it saves 
     *  lots of calc power. Maybe it can be written more elegantly? 
     * @return string with href to next page 
     */ 

     public function next_page($page, $max = 0) 
     { 
     if ($max != 0 && $max > $page) 
      return $this->next(); 

     $url = current_url(); 
     // If the page hasn't been set yet, just add to the URL. 
     if (!$post = strpos($url, '/page')) 
     { 
      return current_url() . 'page/' . ($page + 1); 
     } 
     // Just remove everything after the page segment and readd it with proper number. 
     return substr(current_url(), 0, $post) . '/page/' . ($page + 1); 
     } 

prev_page:

public function prev_page($page, $max = 0) 
    { 
    if ($max != 0 && $max > $page) 
     return $this->prev(); 

    $url = current_url(); 
    // If the page hasn't been set yet, just add to the URL. 
    if (!$post = strpos($url, '/page')) 
    { 
     return current_url() . 'page/' . ($page - 1); 
    } 
    // Just remove everything after the page segment and readd it with proper number. 
    return substr(current_url(), 0, $post) . '/page/' . ($page - 1); 
    } 

Danach habe ich den Code für die vorherige und nächste Seite Tasten mit dieser ersetzt sind :

Vorherige Seite:

<a href="<?php echo $chapter->prev_page($current_page); ?>"> 
      <button type="button" class="btn btn-info" id="next-page"><i class="fa fa-chevron-left"></i></button> 
     </a> 

Nächste Seite:

<a href="<?php echo $chapter->next_page($current_page); ?>"> 
       <button type="button" class="btn btn-info" id="next-page"><i class="fa fa-chevron-right"></i></button> 
      </a> 

Wäre dies eine akzeptable Lösung sein?Working here

Vielen Dank für die Hilfe, Leute!