Question

这是分页插件。我需要一些帮助。我试图使用prev和next按钮的图像。我一直有问题。有谁知道我怎么能这样做？目前，如果我使用图像，它将显示prev / next按钮作为[object 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'});

Answer 1

正如它所说，你可以使用CSS来主题化＃34; .prev＆＃34;和＆＃34; .next＆＃34;类。然后，根据您想要做的事情，您只需要为该元素添加背景图像，更改文本的颜色等。

.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;
}
...

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

1 个答案: