Question

我正在尝试使用上一页＆amp;创建一种在页面之间导航的方法下一步按钮。按钮是使用bootstrap和font-awesome图标制作的，可在此处看到：Live Example

正在使用的软件是Comic Reader

我已设法使用以下代码创建下一页按钮：

<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>

如何创建上一页按钮页面，其工作方式与当前下一页相同？

我已尝试过history.goback，但确实如此，请根据您的历史记录返回上一页。

非常感谢，

编辑：在下面添加了更多详细信息作为答案

Answer 1

您可以通过简单的javascript代码执行以下操作：

<强> 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 2

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 3

在查看章节模型中的 next_page 功能后，我能够使用相同的格式创建 prev_page 功能。 我想确定这是否是解决此问题的正确方法。我对PHP很陌生。

原始的next_page函数：

 /**
       * 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);
  }

之后，我分别用这个按钮代替了prev和next page按钮的代码：

上一页

 <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>

下一页：

 <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>

这是否可以接受？ Working here

非常感谢你的帮助，伙计们！

创建上一页按钮

3 个答案: