Thông báo: Nhận các tin tức mới nhất từ NewTricks Đăng kí ngay

Tạo phân trang cho Median UI (Split post)

 

Với những bài viết quá dài hoặc bạn muốn phân chia thành từng bài, từng mục. Ví dụ như 1 bài học gồm có 5 phần, 1 câu chuyện có 4 phần... Thì hãy sử dụng tính năng phân trang hay còn gọi là Split post.

Hãy chuyển qua trang 2 để lấy code nhé.

Có 1 lưu ý đó chính là các nội dung phải được nằm trong thẻ <div id='postSplit'>, các trang được phân với nhau bằng đoạn <!--nextpage-->. Ngoài ra các nội dung nằm ở bên ngoài thì sẽ lỗi không hoạt động nhé.

<div id='postSplit'>
Nội dung trang 1
  
<!--nextpage-->
Nội dung trang 2
  
<!--nextpage-->
Nội dung trang 3
</div> 

<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.postBody').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='blogPg' id='postPager'><span class='page current'>Trang:</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); /*]]>*/</script>

Hết rồi, trang thứ 3 chỉ là demo thôi không có gì cả.

Getting Info...

About Author

Cuộc sống là những thông điệp.

Đăng nhận xét

Ads by Google