The content released by jQuery + PHP is refreshed (Fckeditor), and the jqueryfckeditor_PHP tutorial

The content released by jQuery + PHP is refreshed with Fckeditor and jqueryfckeditor. The content released by jQuery + PHP is refreshed (Fckeditor). in this article, jqueryfckeditor uses jQuery and uses PHP to pagination the content released by Fckeditor, and implements non-jQuery + PHP content without refreshing the new page (Fckeditor), jqueryfckeditor

This article uses jQuery and PHP to pagination the content released by Fckeditor, and implements no refreshing page switching.
This document assumes that you are a WEB developer, have knowledge about jQuery and PHP, and are familiar with the configuration and use of Fckeditor.
Fckeditor editorThere is a function button to insert a pagination character. click this button to insert a pagination character in the content area, as marked in red:

The html code generated by the pagination operator is:

The actual application scenario is as follows: the content published in the Fckeditor is submitted to the database in the background, and the published content is obtained by connecting to the database in PHP at the front end, and the long content is separated, and pagination.
PHP
PHP splits the content as follows:

function pageBreak($content){  $content = $content;  $pattern = "/
 <\/span><\/p>/";  $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY);  $count = count($strSplit);  $outStr = "";  $i  = 1;   if ($count > 1 ) {   $outStr = "
";   foreach($strSplit as $value) {    if ($i <= 1) {     $outStr .= "
$value
";    } else {     $outStr .= "
$value
";    }    $i++;   }    $outStr .= "
";   for ($i = 1; $i <= $count; $i++) {    $outStr .= "
$i
";   }   $outStr .= "
";   return $outStr;  } else {   return $content;  } }

As you can see, $ pattern in the above code is the paging code generated by the Fckeditor editor. then, PHP compares the content using the preg_split () function and uses the separator as the demarcation point, divide the content into multiple pages and generate a paging navigation button. You only need to call pageBreak ($ content.
CSS
We use CSS to present the style of the paging button. of course, you can modify these CSS to customize the appearance you want.

#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 #abcee4; background-color: #fff;color: #369;text-align: center;cursor: pointer;overflow: hidden;} #page_break .num li.on{background-color: #369;color: #fff;font-weight: bold;} 

JQuery

$ (Function () {$ ('# page_break. num li: first '). addClass ('on'); $ ('# page_break. num li '). click (function () {// hide all page content $ ("# page_break p [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 ');}});});

We use jQuery to set the first page of The paging navigation button to the current status, and then click the paging button to switch the status of the button and display the content of the corresponding page.
By the way, the title of the article is about refreshing the content. In fact, this is not the refreshing effect of Ajax, but the display and hiding of the page content is controlled through jQuery. the page content is read and loaded at a time.

There are many articles about jquery's no-refreshing paging. you can search for previous articles, which may be of greater inspiration.

Compile (Fckeditor), jqueryfckeditor this article will use jQuery, combined with PHP, to pagination the content released by Fckeditor, and achieve no...