jquery中的自定义分页插件

我必须在jquery中构建自定义分页插件。我写了一些代码，但我坚持在一个地方像我的分页默认数字是10页，当用户点击大于第8页时，那么它应该显示另外两页。预期结果如下所示。 fiddle jquery中的自定义分页插件

default display When the 9th page is selected enter image description here

$(function(){ 
$.fn.pageing= function(options){ 
var settings =$.extend({ 
// These are the defaults. 
totalPage: $(this).find('li').length, 
currentpage: 2, 
defaultdisplay:10 
}, options), el= this; 

var defaultFunction= { 
showDefault: function(){ 
for(i=0; i<(settings.defaultdisplay);i++){ 

$(el).find('li').eq(i).show() 
} 
}, 
selectCurrentPage: function(){ 
$(el).find('li:eq('+settings.currentpage+')').addClass('active') 
} 
} 

defaultFunction.showDefault(); 
defaultFunction.selectCurrentPage(); 
} 

$('ul').pageing({defaultdisplay:10}) 
})

来源

2014-09-10 Carlos

我有更多这方面的工作，找到一个解决方案。 fiddle

$(function(){ 

var apply= { 
    init: function (settings){ 
    if(apply.isnegative(settings.moving-settings.defaultdisplay) && settings.currentpage>settings.moving){ 
      apply.nextpage=Math.abs(settings.moving-settings.currentpage); 
      apply.moveto=Math.abs(settings.moving-settings.currentpage); 
    } 
    for(apply.nextpage; apply.nextpage<(settings.defaultdisplay+apply.moveto);apply.nextpage++){ 
    $(this).find('li').eq(apply.nextpage).show() 
    }  
    $(this).find('li:eq('+settings.currentpage+')').addClass('active'); 

    }, 

    isnegative: function(val){ 
     if(val > -1) 
     return false 
     else 
     return true 
     }, 
     nextpage:0, 
     moveto:0 

} 

$.fn.pageing= function(options){ 
var settings =$.extend({ 
// These are the defaults. 
totalPage: $(this).find('li').length, 
currentpage: 8, 
defaultdisplay:10, 
moving:7 
}, options), el= this; 
apply.init.call(this,settings) 
} 

$('ul').pageing({defaultdisplay:10}) 
}) 

</script> 

</head> 

<body> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
<li>10</li> 
<li>11</li> 
<li>12</li> 
<li>13</li> 
<li>14</li> 
<li>15</li> 
<li>16</li> 
</ul>

来源

2014-09-11 03:58:41 Carlos

jquery中的自定义分页插件

回答

相关问题