bbcode phân trang trong bài viết
Mẹo này có thể hoạt động thêm một nút để trình biên tập mà chèn một thẻ [đầu trang] để tạo ra một số trang trong một tin nhắn:
Css
Code:
.postpagination span {
float: left;
display: inline;
margin-left: 4px;
padding: 0 8px;
height: 26px;
border: 1px solid;
border-color: #C2D5E3;
background-color: #FFF;
background-repeat: no-repeat;
color: #333;
overflow: hidden;
text-decoration: none;
margin: 0 4px 0 0;
line-height: 26px;
cursor: pointer;
font-weight: normal;
}
.postpagination span:hover {
border-color: #369;
color: #369;
}
.postpagination span.pp_current {
background-color: #E5EDF2;
border-color: #C2D5E3;
color: #333;
font-weight: bold;
}
.postpagination {
display: block;
font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif;
}
.postpagination:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div.postpagination { margin: 10px 0 }
span.postpagination span {
float: none;
padding: 0 4px;
font-size: 0.8em;
margin: 0 2px 0 0;
}
.postpagination span.pp_next {
padding-right: 25px;
background-image: url(http://i.imgur.com/2C4dvL5.gif);
background-position: 90% 50%;
}
span.postpagination span.pp_next {
padding-right: 12px;
background-position: 90% 50%;
}
Jquery
Code:
$(function() {
var x= "selecteur_suivant_version";
if($("#text_editor_textarea").length && $.sceditor) {
$(function() {
if(!$("#text_editor_textarea").sceditor("instance")) {
return
}
$('<a class="sceditor-button" unselectable="on" title="Page"><div unselectable="on" style="background:url(http://i.imgur.com/a3RgTJc.gif);opacity:1">Page</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
$("#text_editor_textarea").sceditor("instance").insertText("[page]")
})
})
}
var c, y, g = function(a) {
var b;
a = document.createElement(a);
b = "getComputedStyle" in window;
document.body.appendChild(a);
b = (b ? window.getComputedStyle(a, "") : a.currentStyle).display;
document.body.removeChild(a);
return b
}, t = function(o) {
if(o.tagName == "CODE") {
return
}
if(!o.hasChildNodes()) {
return
}
var a = 0;
var p = [0];
var i;
for(i = 0;i < o.childNodes.length;i++) {
c = o.childNodes[i];
if(c.nodeType == 1) {
p.push(c);
t(c)
}else {
if(c.nodeType == 3 && c.nodeValue.indexOf("[page]") != -1) {
while((y = c.nodeValue.indexOf("[page]")) != -1) {
if(y != 0) {
p.push(document.createTextNode(c.nodeValue.substr(0, y)))
}
p.push(0);
a++;
c.nodeValue = c.nodeValue.substr(y + 6)
}
p.push(c)
}else {
p.push(c)
}
}
}
if(a == 0) {
return
}
var b = g(o.tagName) == "block";
for(i = 0;i < p.length;i++) {
if(p[i] === 0) {
y = document.createElement(b ? "DIV" : "SPAN");
y.className = "postpage";
o.appendChild(y)
}else {
y.appendChild(p[i])
}
}
$("> .postpage", o).not(":first").hide();
y = document.createElement(b ? "DIV" : "SPAN");
y.className = "postpagination";
$(y).append('<span class="pp_current">1</span><span>2</span>');
if(a > 1) {
$(y).append("<span>... " + (a + 1) + "</span>")
}
if(b) {
$(y).append('<span class="pp_next">Suivant</span><span class="pp_all">Voir tout</span>')
}else {
$(y).append('<span class="pp_next"></span>')
}
o.appendChild(y);
$(y).on("click", "span", function() {
if($(this).hasClass("pp_all")) {
$(this).parent().parent().children().show();
$(this).parent().remove();
return
}
var pagin = $(this).parent();
var num = parseInt($(".pp_next", pagin).prev().text().replace(/ ?\.\.\. ?/, ""));
var cur = parseInt($(".pp_current", pagin).text().replace(/ ?\.\.\. ?/, ""));
if($(this).hasClass("pp_next")) {
cur += 1
}else {
cur = parseInt($(this).text().replace(/ ?\.\.\. ?/, ""))
}
if(cur < 1) {
cur = 1
}else {
if(cur > num) {
cur = num
}
}
$(".pp_next", pagin).prevUntil().remove();
if(cur < num - 1) {
$(pagin).prepend("<span>... " + num + "</span>")
}else {
if(cur == num) {
$(pagin).prepend('<span class="pp_current">' + num + "</span>")
}
}
if(cur < num) {
$(".pp_next", pagin).show();
$(pagin).prepend('<span class="pp_current">' + cur + "</span><span>" + (cur + 1) + "</span>")
}else {
$(".pp_next", pagin).hide()
}
if(cur > 1) {
$(pagin).prepend("<span>" + (cur - 1) + "</span>");
if(cur > 2) {
$(pagin).prepend("<span>1 ...</span>")
}
}
$(".postpage", $(pagin).parent()).hide();
$(".postpage", $(pagin).parent()).eq(cur - 1).show()
})
};
$(x).each(function() {
t(this)
})
});
Tùy thuộc vào phiên bản của bạn, thay thế mã selecteur_suivant_version
pour phpbb3 :
Code:
div.postbody .content
pour phpbb2 :
Code:
div.postbody
pour invision :
Code:
div.postbody div.post-entry
pour punbb :
Code:
div.post-entry .entry-content > div
Nguồn :
Code:
http://forum.forumactif.com/t355762-pagination-dans-un-message?highlight=pagination
Tags: #code #forumotion #bbcode