在分页中使用上一个和下一个图像

这是分页插件。我需要一点帮助。我正在尝试为prev和next按钮使用图像。我一直有问题。有没有人有任何想法我可以怎么做呢？目前，如果我使用图像，它会显示prev/next按钮作为[对象HTMLImageElement]。在此先感谢！在分页中使用上一个和下一个图像

var methods = { 
    init: function(options) { 
     var o = $.extend({ 
      items: 1, 
      itemsOnPage: 1, 
      pages: 0, 
      displayedPages:5, 
      edges: 2, 
      currentPage: 1, 
      hrefTextPrefix: '#page-', 
      hrefTextSuffix: '', 
      prevText: 'prev', //this is the prev button text. I want to replace this with imgLeft 
      nextText: 'next', //this is the next button text. I want to replace this with imgRight 
      ellipseText: '&hellip;', 
      cssStyle: 'light-theme', 
      labelMap: [], 
      selectOnClick: true, 
      onPageClick: function(pageNumber, event) { 
       // Callback triggered when a page is clicked 
       // Page number is given as an optional parameter 
      }, 
      onInit: function() { 
       // Callback triggered immediately after initialization 
      } 
     }, options || {}); 


     methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'}); 


     methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});

来源

2014-04-22 user3510454

你可以风格的'.prev'和'.next'类而不是使用'background-image' – Morpheus

你能告诉我你使用的是什么插件吗？ –

简单的分页是我正在使用的插件。 http://flaviusmatis.github.io/simplePagination.js/ – user3510454

如前所述，您可以使用CSS来主题“.prev”和“.next”类。然后，取决于你想要做什么，你只需要一个背景图像添加到该元素，改变文字的颜色等

.prev, .next { 
    color: #FF0000; 
    font-family: Arial, sans-serif; 
    display: inline-block; 
} 
.prev { 
    width: 50px; 
    height: 30px; 
    background: url('/my/image.jpeg') no-repeat center; 
} 
...

来源

2014-04-22 16:13:27 MeuhMeuh

在分页中使用上一个和下一个图像

回答

相关问题