Page Helper 3362 ワード 一、HTML構造 のページ 0/0 のページ 、CSS .btn-last-page, .btn-next-page { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; background-color: white; color: orange; border: orange solid 1px; } .btn-last-page:hover,.btn-next-page:hover{ color: darkorange; } #select-current-page{ margin-left: 5px; width: 70px; height: 30px; border: orange solid 1px; } 、JavaScript $(function () { var last = $(".btn.btn-last-page"); var next = $(".btn.btn-next-page"); last.parent().css('color', 'orange'); last.click(function () { -> if (current > 1 && current <= total) { current--; var start = current === 1 ? 0 : (current-1) * offset; var end = current === total ? list.length : current * offset; refresh(list, start, end); $current.text(current); $select.find('option[value=' + current + ']').prop('selected', true); } }); next.click(function () { -> if (current < total && current >= 1) { current++; var start = (current - 1) * offset; var end = current === total ? list.length : current * offset; refresh(list, start, end); $current.text(current); $select.find('option[value=' + current + ']').prop('selected', true); } }); $select.change(function () { -> current = $(this).val(); $current.text(current); var start = parseInt(current) === 1 ? 0 : (current - 1) * offset; var end = parseInt(current) === total ? list.length : current * offset; refresh(list, start, end); }); }); /* */ var current = 1; /* */ var offset = 500; /* */ var total = 0; /* */ var $current = $("#current"); /* */ var $total = $("#total"); /* */ var $line = $("#line"); /* */ var $select = $("#select-current-page"); function page() { -> total = Math.ceil(list.length / offset); $total.text(total); current = total === 0 ? 0 : 1; $current.text(current); var end = current === total ? list.length : current * offset; $line.text(list.length); if (total > 0) { refresh(list, 0, end); } else { refresh(list, current, current); } options(total); } function refresh(data, start, end) { -> var html = ""; for (var i = start; i < end; i++) { html += tr(data, i); } $tbody.html(html); } function options(size) { var html = ""; for (var i = 1; i <= size; i++) { html += ""; html += " " + i + " "; html += ""; } $select.html(html); $select.find('option[value=' + $current.text() + ']').prop('selected', true); } Webページ右下のポップアップ・ボックス 背景グラデーション