새로 고침 없이 jQuery PHP로 게시된 콘텐츠 페이징(Fckeditor)_php 팁

이 기사에서는 PHP와 결합된 jQuery를 사용하여 Fckeditor에서 게시한 콘텐츠의 페이지를 매기고 새로 고침 없이 페이지 전환을 수행합니다.
이 기사에서는 귀하가 웹 개발자이고 jQuery 및 PHP에 대한 지식이 있으며 Fckeditor의 구성 및 사용에 익숙하다고 가정합니다.
Fckeditor 편집기 에는 페이지 나누기를 삽입하는 기능 버튼이 있습니다. 이 버튼을 클릭하면 아래 빨간색 상자에 표시된 것처럼 콘텐츠 영역에 페이지 나누기가 삽입됩니다.

페이지 나누기에 해당하는 생성된 HTML 코드는 다음과 같습니다.

<div style="page-break-after: always"><span style="display: none"> </span></div> 

실제 적용 상황은 다음과 같습니다. 백그라운드에서 Fckeditor 편집기를 통해 게시된 콘텐츠가 데이터베이스에 제출되고, 프런트엔드는 데이터베이스에 대한 PHP 링크를 통해 게시된 콘텐츠를 얻은 다음 긴 콘텐츠를 분할하고 페이징을 수행합니다.
PHP
PHP로 내용을 나누는 방법은 다음과 같습니다.

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='collapse'>$value</div>"; 
   } 
   $i++; 
  } 
 
  $outStr .= "<div class='num'>"; 
  for ($i = 1; $i <= $count; $i++) { 
   $outStr .= "<li>$i</li>"; 
  } 
  $outStr .= "</div></div>"; 
  return $outStr; 
 } else { 
  return $content; 
 } 
}

보시다시피 위 코드의 $pattern은 Fckeditor 편집기에서 생성된 페이지 나누기 코드입니다. 그러면 PHP는 preg_split() 함수를 통해 내용을 비교하고 구분 기호를 구분점으로 사용하여 내용을 분할합니다. 여러 페이지로_ 그리고 페이징 탐색 버튼을 생성합니다. 사용할 때는 pageBreak($content)를 호출하면 됩니다.
CSS
우리는 CSS를 사용하여 페이징 버튼의 스타일을 표현합니다. 물론 이러한 CSS를 수정하여 원하는 모양을 맞춤 설정할 수 있습니다.

#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(){ 
  //隐藏所有页内容 
  $("#page_break div[id^='page_']").hide(); 
 
  //显示当前页内容。 
  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'); 
  } 
 }); 
}); 

jQuery를 사용하여 페이징 탐색 버튼의 첫 번째 페이지를 현재 상태로 설정한 다음 페이징 버튼을 클릭하여 버튼 상태를 전환하고 해당 페이지의 콘텐츠를 표시합니다.
그런데 기사 제목에는 새로 고침이 없다는 내용이 나와 있습니다. 사실 이는 Ajax의 새로 고침이 없는 효과가 아니라 jQuery로 페이지 내용을 표시하고 숨기는 것을 한 번에 읽어들이는 것입니다.

jquery 새로 고침되지 않는 페이지 매김에 대한 많은 기사가 있으며 이전 기사를 검색하면 더 큰 영감을 얻을 수 있습니다.