jPages-master分页插件

作者:basve - 2014年10月19日
jPages-master分页插件

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.html

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


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!