创建上一页按钮

Posted 2023-02-25

【中文标题】创建上一页按钮

【英文标题】：Create Prev Page Button

【发布时间】：2016-06-22 12:00:50

【问题描述】：

我正在尝试创建一种使用 Prev 和 Next 按钮在页面之间导航的方法。这些按钮是使用 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 但就是这样，根据你的历史返回上一页。

非常感谢，

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

【问题讨论】：

你没有函数$chapter->prev_page($current_page);吗？

取决于您的分页方式如何。如果您只是使用页码，那么肯定可以创建类似于您当前的 next_page 函数的东西吗？

你的next_page函数是什么样的？

【参考方案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);

【参考方案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>

【讨论】：

.load(href); 无法加载不存在的页面，因此 div 没有任何反应

【参考方案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);
     

之后，我分别用这个替换了上一页和下一页按钮的代码：

上一页：

 <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

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