Jquery+php published content for no-refresh paging (Fckeditor), jqueryfckeditor_php tutorial

Jquery+php published content for no-refresh paging (Fckeditor), Jqueryfckeditor

This article will use jquery, combined with PHP, to page out the content published by FCKeditor and to implement a no-refresh switch page.
This article assumes you are a web developer, has knowledge of jquery and PHP, and is familiar with the configuration and use of FCKeditor.
The fckeditor editor has a function button that inserts a page break, and clicking the button will insert a page break in the content area, such as a red box callout:

The HTML code generated by the page break corresponds to the following:

Our actual application is this: backstage through the FCKeditor editor published content, submitted to the database, the front desk through the PHP link database to obtain the published content, and then split the long content, and paging.
Php
PHP divides content into the following ways:

function PageBreak ($content) {  $content = $content;  $pattern = "/ <\/span><\/div>/";  $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, the $pattern in the above code is the page break code generated by the FCKeditor editor, and then PHP uses the Preg_split () function to divide the content into multiple page_, and the raw page navigation button with the delimiter as the dividing point. Just call PageBreak ($content) when you use it.
Css
We use CSS to present the style of paging buttons, of course you can modify these CSS to customize the look you want.

Jquery

$ (function () {  $ (' #page_break. Num li:first '). addclass (' on ');   $ (' #page_break. Num li '). Click (function () {   //Hide All page contents   $ ("#page_break div[id^= ' Page_ ']"). Hide ();    Displays the current page content.   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 pager button to the current state, and then click the Paging button to toggle the state of the button and display the contents of the corresponding page.
By the way, the article title is no refresh, in fact, this is not the Ajax effect of no refresh, but through the jquery control page content display and hide, page content is a one-time loading.

About jquery No Refresh page There are many articles, you can search the previous article, perhaps there will be a greater inspiration.

http://www.bkjia.com/PHPjc/1063903.html www.bkjia.com true http://www.bkjia.com/PHPjc/1063903.html techarticle jquery+php published content for non-refreshed paging (Fckeditor), jqueryfckeditor This article will use JQuery, combined with PHP, will Fckeditor publish the content to page, and achieve none ...

