jPages-master分页插件

作者：basve - 2014年10月19日

Add the following code to the <head> section of your page (correct file locations first):

<link rel="stylesheet" href="css/jPages.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="js/jPages.js"></script>

In case you want to use Animate.css animations you will also need to add the file:

<link rel="stylesheet" href="css/animate.css">

Example source code:

<!-- Future navigation panel --><div class="holder"></div><!-- Item container (doesn't need to be an UL) --><ul id="itemContainer"><!-- Items --><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>...</ul>

Initiate the plugin:

$(function(){

  $("div.holder").jPages({
    containerID : "itemContainer"
  });

});

This is how the 'div.holder' source code will look like (imagining that 10 pages were created):

<!-- navigation panel --><div class="holder"><a class="jp-previous jp-disabled">← previous</a><a class="jp-current">1</a><span class="jp-hidden">...</span><a>2</a><a>3</a><a>4</a><a>5</a><a class="jp-hidden">6</a><a class="jp-hidden">7</a><a class="jp-hidden">8</a><a class="jp-hidden">9</a><span>...</span><a>10</a><a class="jp-next">next →</a></div>

本文作者： basve

本文链接： https://www.jianbaizhan.com/code/50

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！