• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Phân trang cho bài viết sử dụng jQuery

3
26/10/2010

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ẻ <div> để 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ẻ </div>.
<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:
<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>
(Còn cập nhật)

{3 bình luậnAdd yours ?}

11:39:00, 19 thg 4, 2011

đặt css + JS trước thể /div là thẻ ở đâu pác, trong HTML thíu gì thẻ đó :(, pác có thể cải tiến để thủ thuật này đẹp hơn hem :)

Reply
13:50:00, 19 thg 4, 2011

Thẻ </head> đấy e, khi post bài bị nhầm, k để ý, sorry

Reply
17:21:00, 30 thg 8, 2011

Lâu không ghé thăm blog. HNH đổi theme BLOG đẹp thật.
Môi trường Blog tập trung giới tri thức từ nhiều ngành nghề thật
Đúng là cùng sở thích tự tim đến nhau

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn