jQuery和CSS都是現代Web開發中不可或缺的一部分。它們的結合可以實現很多強大的功能,尤其是分頁。
var show_per_page = 3;
function pagination() {
var number_of_items = $('#content').children().size();
var number_of_pages = Math.ceil(number_of_items/show_per_page);
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '上一頁';
var current_link = 0;
while(number_of_pages >current_link) {
navigation_html += '' + (current_link + 1) + '';
current_link++;
}
navigation_html += '下一頁';
$('#page_navigation').html(navigation_html);
$('#page_navigation .page_link:first').addClass('active_page');
$('#content').children().css('display', 'none');
$('#content').children().slice(0, show_per_page).css('display', 'block');
}
function previous() {
var current_page = $('#current_page').val();
if (current_page >0) {
current_page--;
$('#current_page').val(current_page);
go_to_page(current_page);
}
}
function next() {
var current_page = $('#current_page').val();
if (current_page< Math.ceil($('#content').children().size()/show_per_page) - 1) {
current_page++;
$('#current_page').val(current_page);
go_to_page(current_page);
}
}
function go_to_page(page_num) {
var start_from = page_num * show_per_page;
var end_on = start_from + show_per_page;
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page_link[longdesc=' + page_num + ']').addClass('active_page').siblings('.active_page').removeClass('active_page');
}
$(document).ready(function() {
pagination();
});
這段代碼實現了一個基本的分頁功能。通過jquery,我們可以輕松地處理分頁的邏輯和動畫效果。同時,css也可以幫助我們美化分頁的樣式,讓它更加美觀。