Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

Với sự hỗ trợ của jQuery, việc phân trang ngay trong bài viết giúp
cho không gian trong trang web được bố trí hài hòa hơn nhờ thanh
Pagination khá giống với phân trang cho cả một website hoặc webblog.



Xem Demo.

Trong thủ thuật này chúng ta cần dùng thẻ
để tạo các trang nhỏ và thẻ
để phân bố đều các đoạn văn trong trang nhỏ ấy.

Trước tiết cần đặt phần code CSS và Javascript vào trước thẻ
.

Code:
<style type='text/css'>
.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;
}
#Searchresult {
margin-top:15px;
margin-bottom:15px;
border:solid 1px #eef;
padding:5px;
background:#eef;
width:40%;
}
#Searchresult p { margin-bottom:1.4em;}
</style>
<script type="text/javascript"
src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery/jquery.min.js"></script>
<script type="text/javascript"
src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<script type="text/javascript">

// This is a very simple demo that shows how a range of elements can
// be paginated.

/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}

/**
* Callback function for the AJAX content loader.
*/
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:1
});
}

// Load HTML snippet with AJAX and insert it into the Hiddenresult element
// When the HTML has loaded, call initPagination to paginate the elements
$(document).ready(function(){
initPagination();
});



</script>

* Chú ý: Dòng items_per_page:1, số 1 thể hiện 1 thành phần div trên mỗi
trang, bạn có thể đặt 2, 3, 4, ... tùy theo số lượng thành phần div cần
hiển thị.

Ở phần nội dung phân trang, thiết lập cấu trúc HTML như sau:

Code:
<div id="Pagination"></div>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>

<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;">
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 1.</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 1.</p>
</div>
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 2</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 2.</p>
</div>
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 3</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 3.</p>
</div>
</div>

Hãy xây dựng diễn đàn cùng [KiNg]_[PiN]-BB bạn nhé !!!


Admin không phải cái gì cũng biết
Admin chỉ mở ra một cộng đồng để những người hiểu biết và mới biết, trao đổi học tập !
Mong Các bạn đừng đánh giá hay nói bất cứ một lời lẽ nào khích tướng OK...

Không Hay Đừng Nói Lời Cay Đắng

[*]Diễn đàn đẹp nhất với trình duyệt web Mozilla Firefox
[*]Còn với mấy loại còn lại chắc là thuộc dang diễn đàn tồi nhất !!!
Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create a blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải