[tintuc]Hôm nay cuahangtemplate.com xin giới thiêu với các bạn thủ thuật mới
Khi muốn chia nhỏ nội dung của 1 bài viết thành nhiều trang nhỏ ngay trong chính bài viết đó , ta có thể dùng dùng paging client jquery .
ưu điểm : phân trang cho bài viết thành nhiều trang nhỏ , người đọc dễ dàng theo dõi hơn , tránh nội dung 1 trang quá dài...
nhược điểm : nội dung vẫn vậy time load trang cũng không đổi ... tốn thêm script chạy - làm chậm time tải trang
Cách dùng cho blogspot
B1 : add script + style cho thanh phân trang
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://webvn20.googlecode.com/files/paging_shimi.js"></script>
<style type="text/css" media="screen">
.pagination { font-size: 80%; }
.pagination a { text-decoration: none; border: solid 1px #AAE; color: #15B; }
.pagination a, .pagination span { display: block; float: left; padding: 0.3em 0.5em; margin-right: 5px; margin-bottom: 5px; }
.pagination .current { background: #26B; color: #fff; border: solid 1px #AAE; }
.pagination .current.prev, .pagination .current.next{ color:#999; border-color:#999; background:#fff; }
</style>
B2 : config các thành phần để phân trang cho bài viết , số bài, số trang, số trang hiển thị trên thanh....<script>
var pagination_options = {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:3
}
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
}
$(document).ready(function(){
initPagination();
});
</script>
B3 : khi cần chia 1 bài viết thành nhiều phần - ta chỉ cần post theo mẫu
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />
<div id="Searchresult"></div>
<div id="hiddenresult" style="display:none;">
<div class="result">Nội dung Trang 1</div>
<div class="result">Nội dung Trang 2</div>
<div class="result">Nội dung Trang 3</div>
<div class="result">Nội dung Trang 4</div>
<div class="result">Nội dung Trang 5</div>
<div class="result">Nội dung Trang 6</div>
<div class="result">Nội dung Trang 7</div>
</div>
Trong đó
<div id="Pagination" class="pagination"></div>
- là thanh phân trangngoài cách trên còn có cách đơn giản là chia bài viết thành nhiều trang
Nếu có thắc mắc, hãy để lại comment phía dưới nhé, admin của cuahangtemplate.com sẵn sàng trợ giúp bạn
chúc các bạn thành công!! [/tintuc]
source https://www.cuahangtemplate.com/2019/06/phan-trang-cho-tung-bai-viet-tren.html
Không có nhận xét nào:
Đăng nhận xét