标签：content tar padding cti head extern back oop sheet
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单实用且功能齐全的jQuery分页插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="dist/pagination.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul, li{
list-style: none;
}
#wrapper{
width: 900px;
margin: 20px auto;
}
.data-container{
margin-top: 5px;
}
.data-container ul{
padding: 0;
margin: 0;
}
.data-container li{
margin-bottom: 5px;
padding: 5px 10px;
background: #66677c;
color: #fff;
}
</style>
</head>
<body>
<article class="htmleaf-container">
<header class="htmleaf-header">
<h1>简单实用且功能齐全的jQuery分页插件 <span>A jQuery plugin to provide simple yet fully customisable pagination</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201511202805.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div id="wrapper">
<section>
<div class="data-container"></div>
<div id="pagination-demo1"></div>
</section>
</div>
</article>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="dist/pagination.js"></script>
<script>
$(function(){
function createDemo(name){
var container = $(‘#pagination-‘ + name);
var sources = function(){
var result = [];
for(var i = 1; i < 196; i++){
result.push(i);
}
return result;
}();
var options = {
dataSource: sources,
className: ‘paginationjs-theme-blue‘,
callback: function(response, pagination){
window.console && console.log(response, pagination);
var dataHtml = ‘<ul>‘;
$.each(response, function(index, item){
dataHtml += ‘<li>‘+ item +‘</li>‘;
});
dataHtml += ‘</ul>‘;
container.prev().html(dataHtml);
}
};
//$.pagination(container, options);
container.addHook(‘beforeInit‘, function(){
window.console && console.log(‘beforeInit...‘);
});
container.pagination(options);
container.addHook(‘beforePageOnClick‘, function(){
window.console && console.log(‘beforePageOnClick...‘);
//return false
});
return container;
}
createDemo(‘demo1‘);
});
</script>
</body>
</html>
| <!doctype html> | |
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>简单实用且功能齐全的jQuery分页插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> | |
| <link rel="stylesheet" type="text/css" href="css/normalize.css" /> | |
| <link rel="stylesheet" type="text/css" href="css/default.css"> | |
| <link href="dist/pagination.css" rel="stylesheet" type="text/css"> | |
| <style type="text/css"> | |
| ul, li{ | |
| list-style: none; | |
| } | |
| #wrapper{ | |
| width: 900px; | |
| margin: 20px auto; | |
| } | |
| .data-container{ | |
| margin-top: 5px; | |
| } | |
| .data-container ul{ | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .data-container li{ | |
| margin-bottom: 5px; | |
| padding: 5px 10px; | |
| background: #66677c; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <article class="htmleaf-container"> | |
| <header class="htmleaf-header"> | |
| <h1>简单实用且功能齐全的jQuery分页插件 <span>A jQuery plugin to provide simple yet fully customisable pagination</span></h1> | |
| <div class="htmleaf-links"> | |
| <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> | |
| <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201511202805.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> | |
| </div> | |
| </header> | |
| <div id="wrapper"> | |
| <section> | |
| <div class="data-container"></div> | |
| <div id="pagination-demo1"></div> | |
| </section> | |
| </div> | |
| </article> | |
| <script src="js/jquery-1.10.2.min.js"></script> | |
| <script src="dist/pagination.js"></script> | |
| <script> | |
| $(function(){ | |
| function createDemo(name){ | |
| var container = $(‘#pagination-‘ + name); | |
| var sources = function(){ | |
| var result = []; | |
| for(var i = 1; i < 196; i++){ | |
| result.push(i); | |
| } | |
| return result; | |
| }(); | |
| var options = { | |
| dataSource: sources, | |
| className: ‘paginationjs-theme-blue‘, | |
| callback: function(response, pagination){ | |
| window.console && console.log(response, pagination); | |
| var dataHtml = ‘<ul>‘; | |
| $.each(response, function(index, item){ | |
| dataHtml += ‘<li>‘+ item +‘</li>‘; | |
| }); | |
| dataHtml += ‘</ul>‘; | |
| container.prev().html(dataHtml); | |
| } | |
| }; | |
| //$.pagination(container, options); | |
| container.addHook(‘beforeInit‘, function(){ | |
| window.console && console.log(‘beforeInit...‘); | |
| }); | |
| container.pagination(options); | |
| container.addHook(‘beforePageOnClick‘, function(){ | |
| window.console && console.log(‘beforePageOnClick...‘); | |
| //return false | |
| }); | |
| return container; | |
| } | |
| createDemo(‘demo1‘); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
标签：content tar padding cti head extern back oop sheet
原文地址：https://www.cnblogs.com/roak/p/12417002.html
