Rumah > hujung hadapan web > tutorial js > jquery melaksanakan div halaman html, paging palsu mempunyai prinsip dan code_jquery

jquery melaksanakan div halaman html, paging palsu mempunyai prinsip dan code_jquery

WBOY
Lepaskan: 2016-05-16 16:36:50
asal
1552 orang telah melayarinya

Prinsip paging palsu bagi div: jumlah ketinggian div yang diisi (1000px) dan ketinggian paparan (100px) maka jumlah bilangan halaman ialah 10 halaman. Apabila melihat halaman kedua, ketinggian div yang dipaparkan adalah antara 100 - 200, dan seterusnya

Melihat halaman itu berputar sebenarnya adalah bar skrol bagi div yang bergerak.

<div id="applications">显示数据集合</div>
Salin selepas log masuk
<style> 
#applications 
{ 
/* width:500px;调整显示区的宽*/ 
height: 1592px; /*调整显示区的高*/ 
font-size: 14px; 
margin-top:23px; 
line-height: 20px; 
overflow-pageindex: hidden; 
overflow-y: hidden; 
word-break: break-all; 
} 
</style>

Salin selepas log masuk
<script language="javascript"> 
var obj = document.getElementById("applications"); //获取内容层 
var pages = document.getElementById("pages"); //获取翻页层 
window.onload = function ()//重写窗体加载的事件 
{ 
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //获取页面数量 
// pages.innerHTML = "<b>共" + allpages-1+ "页</b> "; //输出页面数量 
for (var i = 1; i <= allpages; i++) { 
if (i == 1) { 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">首页</a> "; 
} 
else{ 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">" + i + "</a> "; 
} 
//循环输出第几页 
} 
} 
function showPage(pageINdex) { 
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根据高度,输出指定的页 
} 
</script>
Salin selepas log masuk

Apabila membuka halaman data dinamik, halaman terakhir tidak mencukupi untuk bilangan item halaman, dan ketinggian khusus perlu diisi, jika tidak, data dari halaman sebelumnya akan dipaparkan berulang kali pada halaman terakhir.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan