JQuery + FCK editor + PHP implement article paging code

This jQuery + FCK editor + PHP implements the article paging code, which is commonly used in news development. We often display too long articles on pages, this is good for search engines and users.

ThisJquery + fck editor + php tutorials implement article paging codeIt is often used in news development. We often display too long articles on pages, which is good for search engines and users.

Insert a paging character in fck, as shown in figure

Paging code

 

Function pagebreak ($ content)
{
$ Content = $ content;
$ Pattern = "/<div style =" page-break-after: always "> <span style =" display: none "> </span> </div> /";
$ Strsplit = preg_split ($ pattern, $ content,-1, preg_split_no_empty );
$ Count = count ($ strsplit );
$ Outstr = "";
$ I = 1;

If ($ count> 1 ){
$ Outstr = "<div id = 'page _ break'> ";
Foreach ($ strsplit as $ value ){
If ($ I <= 1 ){
$ Outstr. = "<div id = 'page _ $ I '> $ value </div> ";
} Else {
$ Outstr. = "<div id = 'page _ $ I 'class = 'collaps tutorial E'> $ value </div> ";
}
$ I ++;
}

$ Outstr. = "<div class = 'num'> ";
For ($ I = 1; $ I <= $ count; $ I ++ ){
$ Outstr. = "<li> $ I </li> ";
}
$ Outstr. = "</div> ";
Return $ outstr;
} Else {
Return $ content;
}
}

Jquery implementation code

 

$ (Document). ready (function (){
$ ('# Page_break. num li: first'). addclass ('on ');

$ ('# Page_break. num li'). click (function (){
// Hide all page content
$ ("# Page_break div [id ^ = 'page _ ']"). hide ();

// Display the content of the current page.
If ($ (this). hasclass ('on ')){
$ ('# Page_break # page _' + $ (this). text (). show ();
} Else {
$ ('# Page_break. num li'). removeclass ('on ');
$ (This). addclass ('on ');
$ ('# Page_break # page _' + $ (this). text (). fadein ('normal ');
}
});
});

Css tutorial control paging Style

 

# Page_break {

}
# Page_break. collapse {
Display: none;
}
# Page_break. num {
Padding: 10px 0;
Text-align: center;
}
# Page_break. num li {
Display: inline;
Margin: 0 2px;
Padding: 3px 5px;
Border: 1px solid # ff7300;
Background-color: # fff;

Color: # ff7300;
Text-align: center;
Cursor: pointer;
Font-family: arial;
Font-size: 12px;
Overflow: hidden;
}
# Page_break. num li. on {
Background-color: # ff7300;

Color: # fff;
Font-weight: bold;
}

Paging Effect