<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,pagination,分页,jquery插件" />
<meta name="description" content="功能强大的jQuery分页插件pagination,更多pagination,分页,jquery插件请访问脚本之家JS代码频道。" />
<title>功能强大的jQuery分页插件pagination_脚本之家</title>
<link rel="stylesheet" href="../pagination.css" />
<link rel="stylesheet" href="demo.css" />
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.pagination.js"></script>
<script type="text/javascript">
// This is a very simple demo that shows how a range of elements can
// be paginated.
// The elements that will be displayed are in a hidden DIV and are
// cloned for display. The elements are static, there are no Ajax
// calls involved.
/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int} page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
/**
* Initialisation function for pagination
*/
function initPagination() {
// count entries inside the hidden content
var num_entries = jQuery('#hiddenresult div.result').length;
// Create content inside pagination element
$("#Pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}
// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});
</script>
</head>
<body>
<h1>jQuery Pagination Plugin Demo</h1>
<div id="Pagination"></div>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>
<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;">
<div class="result"><p>Globally maximize granular
"outside the box" thinking vis-a-vis quality niches. Proactively formulate 24/7
results whereas 2.0 catalysts for change. Professionally implement 24/365 niches
rather than client-focused users.</p>
<p>
Competently engineer high-payoff "outside the box" thinking through cross
functional benefits. Proactively transition intermandated processes through
open-source niches. Progressively engage maintainable innovation and extensible
interfaces.</p>
</div>
<div class="result"><p>Credibly fabricate e-business models for end-to-end niches.
Compellingly disseminate integrated e-markets without ubiquitous services.
Credibly create equity invested channels with multidisciplinary human capital.</p>
<p>
Interactively integrate competitive users rather than fully tested
infomediaries. Seamlessly initiate premium functionalities rather than impactful
architectures. Rapidiously leverage existing resource-leveling processes via
user-centric portals.</p>
</div>
<div class="result"><p>Monotonectally initiate unique
e-services vis-a-vis client-centric deliverables. Quickly impact parallel
opportunities with B2B bandwidth. Synergistically streamline client-focused
infrastructures rather than B2C e-commerce.</p>
<p>
Phosfluorescently fabricate 24/365 e-business through 24/365 total linkage.
Completely facilitate high-quality systems without stand-alone strategic theme
areas.</p>
</div>
</div>
<div id="footer">
Copyright © 2010 by <a href="http://www.d-scribe.de/">describe europe Ltd.</a>.
</div>
<div style="text-align:center;clear:both">
<p>来源:<a href="http://www.jb51.net" target="_blank"> thesaint</a> 代码整理:<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢:<a href="http://www.jb51.net" target="_blank">luozi</a></p>
<p>转载请注明出处,此代码仅供学习交流,请勿用于商业用途。</p>
</div>
</body>
</html>