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

Source: Internet
Author: User

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 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.
    We use CSS to present the style of paging buttons, of course you can modify these CSS to customize the look you want.


    $ (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 ...

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.