- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>jQuery插件</title>
- <style type="text/CSS">
- .pager {
- width: 800px;
- margin: 0 auto;
- }
- .pager .pageItem {
- display: inline-block;
- padding: 5px 8px;
- background: dodgerblue;
- margin: 3px;
- }
- .pager a {
- color: white;
- text-decoration: none;
- }
- .pager a:hover {
- background: orangered;
- }
- </style>
- </head>
- <body>
- <div id="div1">
- </div>
- <div id="div2">
- </div>
- <div id="div3">
- </div>
- <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/SuperPlus/jQuery.SuperPlus-1.0.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- $.fn.superPager = function(options) {
- var settings = {
- total: 100,
- record: 10,
- callback: null
- };
- $.extend(settings, options);
- var pager = $("<div/>").addClass("pager").appendTo(this);
- for(var i = 1; i <= Math.ceil(settings.total / settings.record); i++) {
- $("<a href='#'/>").html(i).addClass("pageItem").click(function(p) {
- return function() {
- if(settings.callback) {
- settings.callback(settings, p);
- }
- return false;
- };
- }(i)).appendTo(pager);
- }
- return this;
- }
- $("#div1").superPager({
- callback: function(opt, index) {
- alert(opt.total + "," + opt.record + "," + index);
- }
- });
- $("#div2").superPager({
- total:300,
- record:20,
- callback: function(opt, index) {
- alert(opt.total + "," + opt.record + "," + index);
- }
- });
- $("#div3").superPager({
- total:10,
- record:2,
- callback: function(opt, index) {
- alert(opt.total + "," + opt.record + "," + index);
- }
- });
- </script>
- </body>
- </html>
来源: