|
html頁(yè)面： ------------------------------------------------------------------------------------------------- <div style="text-align:center"> <div class="pager"></div> </div> Css樣式： ------------------------------------------------------------------------------------------------- .pager { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; border:1px solid #dddddd; border-radius:3px; display:inline-block; clear:both; } .pager a,.pager span { font-size:14px; color:#428bca; border-right:1px solid #dddddd; padding:4px 9px; float:left; text-decoration:none; } .pager span { color:#fff; background:#428bca; } .pager a:hover { color:#2a6496; background:#f2f2f2; } .pager a.last { border-right:0; } js方法： ------------------------------------------------------------------------------------------------- //生成Pager，當(dāng)前頁(yè)碼, 總頁(yè)數(shù), 回調(diào)function $.fn.pager = function(page, total, callback) { var html = ''; html += '<a class="first" href="javascript:;">首頁(yè)</a>'; html += '<a class="first" href="javascript:;">上一頁(yè)</a>'; var start = page - 5 < 0 ? 0 : page - 5; var end = page + 5 < total ? page + 5 : total; for (var i = start; i < end; i++) { html += i == page - 1 ? '<span>' + (i + 1) + '</span>' : '<a href="javascript:;">' + (i + 1) + '</a>'; } html += '<a class="first" href="javascript:;">下一頁(yè)</a>'; html += '<a class="last" href="javascript:;">末頁(yè)</a>'; $(this).html(html).find('a').click(function() { var p = $(this).text(); if (p == '上一頁(yè)') p = page == 1 ? 1 : page - 1; if (p == '下一頁(yè)') p = page == total ? total : page + 1; if (p == '首頁(yè)') p = 1; if (p == '末頁(yè)') p = total; if (p != page) callback(parseInt(p)); }); } onload = function() { //用用回調(diào) function go(p) { $('.pager').pager(p, 82, go); } $('.pager').pager(1, 82, go); }
|
|
|
來(lái)自： CoCO-Ebook > 《工具包》
