2014-04-22 107 views
0

這是分頁插件。我需要一點幫助。我正在嘗試爲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: '…', 
      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'}); 
+1

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

+0

你能告訴我你使用的是什麼插件嗎? –

+0

簡單的分頁是我正在使用的插件。 http://flaviusmatis.github.io/simplePagination.js/ – user3510454

回答

0

如前所述,您可以使用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; 
} 
... 
相關問題