PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 ),
PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 ),
<span>/*</span><span> ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8<br /> ******* 其它组件:jQuery-1.8.3.min.js + Smarty 3.1.18 + TinyMCE 4.1.6 ******* Date:2014-10-20 ******* Author:小dee ******* Blog:http://www.cnblogs.com/dee0912/ </span><span>*/</span>
写在前面的:
1.不论是列表分页还是文章分页,关键的地方在于如何处理当前页之前和之后的偏移量,也就是要考虑 ( 不同情况下哪些页码元素该显示,哪些不该显示 ) 和计算 ( 显示多少页码 ) ,这些关键的方法在 url 分页时写入分页类文件中,在 ajax 分页中写入 js 文件中;
2.在 ajax 分页时,使用 live() 方法可以使 jQuery动态添加的元素也能绑定事件处理函数 ( ajax_arc.js 文件 )
这个功能模块的主要文件包括长文章分页类 arc_page.class.php 和 用于 ajax 文章分页的 ajax_arc.js 两个文件,包含的功能有:
1.文章内容可以使用 url 分页,分页后的 url 参数为 p;
2.文章内容可以使用 ajax 分页,显示页码;
3.和列表分页类一样,可以更改"上一页"、"下一页"文字
其他:这个模块的分页功能为 编辑器手动插入分页符 进行分页。
这个模块配合使用了 TinyMCE ( 4.1.6 ) 编辑器
TinyMCE编辑器下载地址:http://www.tinymce.com/download/download.php,解压后文件夹 tinymce 放至根目录;
语言包下载地址:http://www.tinymce.com/i18n/index.php,选择 Chinese (China) ,解压后把 langs 文件夹里的 zh_CN.js 放至 tinymce/langs 目录下;
在模板里引入 tinymce/tinymce.min.js 文件;
其他使用方法可以参照博客:http://www.cnblogs.com/nkxyf/p/3883586.html
效果图:
url 分页
图1.
图2.
图3.
ajax 分页
图1.
图2.
模块文件结构图:
ROOT:
├─conn
│ └─conn.php
│
├─libs -- smarty库
│
├─templates
│ │
│ ├─add_article.html -- 添加文章模板
│ ├─view_article.html -- 前台文章页模板
│ ├─list.html -- 前台列表页模板
│ ├─success.html -- 操作成功时显示模板
│ ├─error.html -- 操作失败时显示模板
│ │
│ ├─css
│ │
│ ├─images
│ │ └─loading.gif -- ajax分页时请求数据接收到之前的加载图
│ │
│ └─js
│ │
│ ├─jquery-1.8.3.min.js
│ │
│ ├─showTime.js -- 操作成功或失败时的倒计时跳转文件
│ │
│ ├─ajax_arc.js -- 当分页方式为ajax时文章页模板view_article.html加载的js
│ │
│ └─ajax.js -- 当分页方式为ajax时列表页模板list.html加载的js
│
├─templates_c
│
├─tinymce -- 编辑器
│
├─init.inc.php -- smarty配置文件
│
├─list_page.class.php -- 列表分页类
│
├─arc_page.class.php -- 文章分页类
│
├─list.php -- 列表页
│
├─view_article.php -- 文章页
│
├─ajaxarc.php -- 文章页ajax分页时接受请求的php文件
│
├─ajaxpage.php -- 列表页ajax分页时接受请求的php文件
│
└─ins.php -- 添加文章php文件
主要代码:
添加文章( templates/add_article.html , add_article.php , ins.php )
templates/add_article.html
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>PHP文章分页类title> 6 <link href="<{$Template_Dir}>/css/style_control.css" rel="stylesheet" type="text/css"> 7 <script src="<{$Template_Dir}>/js/jquery-1.8.3.min.js">script> 8 9 10 <script src="<{$ROOT_URL}>tinymce/tinymce.min.js">script> 11 <script> 12 13 tinymce.init({ 14 15 selector:'#content', //编辑区域 16 theme: "modern", //主题 17 language: "zh_cn", //语言(中文需要到官网下载) 18 19 width:800, //编辑框宽 20 height: 300, //编辑框高 21 22 plugins: [ 23 24 "advlist autolink lists link image charmap print preview hr anchor pagebreak", 25 "searchreplace wordcount visualblocks visualchars code fullscreen", 26 "insertdatetime media nonbreaking save table contextmenu directionality", 27 "emoticons template paste textcolor colorpicker textpattern" 28 ], 29 30 //第一行工具栏 31 toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 32 33 //第二行工具栏 34 toolbar2: "print preview media | forecolor backcolor emoticons", 35 36 image_advtab: true, 37 38 //初始时提供的默认格式 39 style_formats: [ 40 {title: 'Bold text', inline: 'b'}, 41 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, 42 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, 43 {title: 'Example 1', inline: 'span', classes: 'example1'}, 44 {title: 'Example 2', inline: 'span', classes: 'example2'}, 45 {title: 'Table styles'}, 46 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} 47 ] 48 }); 49 50 script> 51 head> 52 <body> 53 54 <form id="arc_form" action="ins.php" method="post"> 55 56 标题:<br /> 57 <input type="text" id="title" name="title" autocomplete="off" /><br /><br /> 58 内容:<br /> 59 <textarea id="content" name="content">textarea><br /> 60 <input type="button" id="sub" value="提交" /> 61 62 form> 63 64 body> 65 <script> 66 67 $(function(){ 68 69 $("#sub").click(function(){ 70 71 if($("#title").val() != ""){ 72 73 $("#arc_form").submit(); 74 }else{ 75 76 alert("标题不能为空"); 77 } 78 }); 79 }); 80 script> 81 html> View Code
前台显示如图:
add_article.php
1 php 2 3 require 'init.inc.php'; 4 5 $smarty->assign("ROOT",ROOT); 6 $smarty->assign("ROOT_URL",ROOT_URL); 7 $smarty->assign("Template_Dir",Template_Dir); 8 9 $smarty->display("add_article.html"); View Code
ins.php
1 php 2 3 require 'conn/conn.php'; 4 require 'init.inc.php'; 5 6 if(isset($_POST['title']) && !empty($_POST['title'])){ 7 8 if(get_magic_quotes_gpc()){ 9 10 $title = trim($_POST['title']); 11 12 }else{ 13 14 $title = addslashes(trim($_POST['title'])); 15 } 16 } 17 18 if(isset($_POST['content']) && !empty($_POST['content'])){ 19 20 $content = htmlspecialchars($_POST['content']); 21 } 22 23 function check_input($value){ 24 25 // 如果不是数字则加引号 26 if (!is_numeric($value)){ 27 28 $value = mysql_real_escape_string($value); 29 } 30 return $value; 31 } 32 33 $title = check_input($title); 34 35 36 //插入数据 37 $sql = "insert into archives (title,content,pubdate)values('".$title."','".$content."','".time()."')"; 38 39 40 if($conne->uidRst($sql) == 1){ 41 42 //当前时间存入session 43 $_SESSION['t'] = $t; 44 45 $smarty->assign("Template_Dir",Template_Dir); 46 $smarty->assign("ROOT_URL",$ROOT_URL); 47 48 //跳转参数 49 $smarty->assign("do","添加"); 50 $smarty->assign("addr","列表页"); 51 $smarty->assign("url","list.php"); 52 53 $smarty->display("success.html"); 54 }else{ 55 56 $smarty->assign("Template_Dir",Template_Dir); 57 $smarty->assign("ROOT_URL",$ROOT_URL); 58 59 //跳转参数 60 $smarty->assign("do","添加"); 61 $smarty->assign("addr","添加页"); 62 $smarty->assign("url","add_article.php"); 63 64 $smarty->display("error.html"); 65 } View Code把输入的文章内容使用htmlspecialchars()存入数据库。TinyMCE编辑器会自动把用户输入的内容前后加上
标签,不只是文字,也包括图片、视频等富媒体,如:图片:
视频:
分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )
arc_page.class.php
1 php 2 3 class MyArcPage{ 4 5 private $content; 6 private $pagebreak; 7 private $url; //当前出去参数p的url 8 9 //页码显示 10 private $prePage; //页码前偏移量 11 private $floPage; //页码后偏移量 12 private $pageNow; //当前页码 13 private $totalPage; 14 15 private $page_act; //翻页样式 0:url 1:ajax 16 17 //页码文字 18 private $firstFonts = "首页"; 19 private $lastFonts = "末页"; 20 21 private $nextFonts = "下一页 >"; 22 private $preFonts = "< 上一页"; 23 24 //显示页码 25 private $pageShow = ""; 26 27 28 //参数:文章内容,分页符的html代码,分页方式,当前url的p参数 29 function __construct($content,$pagebreak,$page_act,$p,$prePage,$floPage){ 30 31 $this->content = $content; 32 $this->pagebreak = $pagebreak; 33 $this->floPage = $floPage; 34 $this->prePage = $prePage; 35 36 $this->page_act = $page_act; 37 38 $this->p = $p; 39 } 40 41 /**************************检测是否含有分页符***********************/ 42 public function check(){ 43 44 //检测是否含有分页符 45 if(strpos($this->content,$this->pagebreak) === false){ 46 47 //不含有分页符 48 return $this->content; 49 }else{ 50 51 //含有分页符 52 $contentArr = explode($this->pagebreak,$this->content); 53 return $contentArr; 54 } 55 } 56 57 /************获得当前页页码,接收$_GET['p']*******/ 58 public function getPageNow(){ 59 60 if(!isset($this->p)){ 61 62 $this->pageNow = 1; 63 }else if($this->p>0){ 64 65 $this->pageNow = $this->p; 66 }else{ 67 68 die("page number error"); 69 } 70 71 return $this->pageNow; 72 } 73 74 /**************************设置当前页面链接**************************/ 75 public function getUrl(){ 76 77 $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 78 79 //判断是否带参数 80 if(strpos($url,"?") === false){ //不带参数 81 82 return $this->url = $url."?"; 83 }else{ //带参数 84 85 $url = explode("?",$url); 86 //参数 87 $param = $url[1]; 88 89 //判断是否有多个参数 90 if(strpos($param,"&") === false){ //只有一个参数 91 92 //判断参数是否为p 93 if(strpos($param,"p=") === false){ //不含参数p 94 95 //合并url 96 $url = implode("?",$url); 97 98 return $this->url = $url."&"; 99 100 }else{ 101 102 //把参数p去掉 103 $url = $url[0]; 104 105 return $this->url = $url."?"; 106 } 107 108 }else{ //多个参数 109 110 $param = explode("&",$param); 111 112 //遍历参数数组 113 foreach($param as $k=>$v){ 114 115 if(strpos($v,"p=") === false){ 116 117 continue; 118 }else{ 119 120 //当含有参数p时,把它从数组中删除 121 unset($param[$k]); 122 } 123 } 124 125 //删除参数p之后组合数组 126 $param = implode("&",$param); 127 $url[1] = $param; 128 $url = implode("?",$url); 129 130 return $this->url = $url."&"; 131 } 132 } 133 } 134 135 /****************************前偏移量处理***************************/ 136 public function preOffset($preFonts){ 137 138 $this->getPageNow(); 139 $this->getUrl(); 140 $this->getPreFonts($preFonts); 141 142 //前偏移量的处理 143 if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){ 144 145 //上一页 146 $this->pageShow .= "$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts).""; 147 148 149 //页码 150 for($i=1;$i<=$this->pageNow-1;$i++){ 151 152 //ajax方式不显示 153 //if($this->page_act != 1){ 154 155 $this->pageShow .= "$this->url."p=".$i."\">".$i.""; 156 //} 157 } 158 159 }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow至少大于2时才会出现"1..." 160 161 //首页 162 $this->pageShow .= "$this->url."p=1\">".$this->firstFonts.""; 163 164 //上一页 165 $this->pageShow .= "$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts).""; 166 167 for($i=$this->prePage;$i>=1;$i--){ 168 169 //当前页和'...'之间的页码,ajax方式不显示 170 //if($this->page_act != 1){ 171 172 $this->pageShow .= "$this->url."p=".($this->pageNow-$i)."\">".($this->pageNow-$i).""; 173 //} 174 } 175 } 176 } 177 178 /**********************页码和后偏移量处理***************************/ 179 public function floOffset($nextFonts){ 180 181 $this->getPageNow(); 182 $this->getTotalPage(); 183 $this->getUrl(); 184 $this->getNextFonts($nextFonts); 185 186 if($this->totalPage > $this->floPage){ //总页数大于后偏移量时 187 188 for($i=0;$i<=$this->floPage;$i++){ 189 190 $page = $this->pageNow+$i; 191 192 if($page<=$this->totalPage){ 193 194 //页码,ajax方式不显示 195 //if($this->page_act != 1){ 196 197 $this->pageShow .= "$this->url."p=".$page."\">".$page.""; 198 //} 199 } 200 } 201 202 if($this->pageNow < $this->totalPage){ 203 204 $this->pageShow .= "$this->url."p=".($this->pageNow+1)."\">".($nextFonts == ""?$this->nextFonts:$nextFonts).""; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值 205 206 if(($this->pageNow+$this->floPage+1)<$this->totalPage){ 207 208 $this->pageShow .= "$this->url."p=".$this->totalPage."\">末页"; 209 } 210 211 }else if($this->pageNow > $this->totalPage){ 212 213 die("超出页码范围"); 214 } 215 }else{ //总页数小于后偏移量时 216 217 if($this->pageNow < $this->totalPage){ //当前页小于总页数时 218 219 for($i=0;$i<$this->totalPage;$i++){ 220 221 $page = $this->pageNow+$i; 222 223 if($page < $this->totalPage){ 224 225 //if($this->page_act != 1){ 226 227 //页码后边界 228 $this->pageShow .= "$this->url."p=".$page."\">".$page.""; 229 //} 230 231 }else if($page == $this->totalPage){ 232 233 //if($this->page_act != 1){ 234 235 $this->pageShow .= "$this->url."p=".$page."\">".$page.""; 236 //} 237 }else if($this->pageNow > $this->totalPage){ 238 239 die("超出页码范围"); 240 } 241 } 242 243 $this->pageShow .= "$this->url."p=".($this->pageNow+1)."\">".$this->nextFonts.""; 244 }else if($this->pageNow > $this->totalPage){ 245 246 die("超出页码范围"); 247 }else{ //当前页等于总页数 248 249 //if($this->page_act != 1){ 250 251 $this->pageShow .= "$this->url."p=".$this->totalPage."\">".$this->totalPage.""; 252 //} 253 } 254 } 255 } 256 257 /********************其它页面信息***********************/ 258 public function getOtherInfo(){ 259 260 $this->pageShow .= " 当前第".$this->pageNow."页"; 261 $this->pageShow .= "/共".$this->totalPage."页"; 262 263 return $this->pageShow; 264 } 265 266 /* ********************获取上一页、下一页文字******************* */ 267 public function getPreFonts($preFonts){ 268 269 return $this->preFonts = ($preFonts=="")?$this->preFonts:$preFonts; 270 } 271 272 public function getNextFonts($nextFonts){ 273 274 return $this->nextFonts = ($nextFonts=="")?$this->nextFonts:$nextFonts; 275 } 276 277 278 279 /******************************获得总页数页**********************************/ 280 public function getTotalPage(){ 281 282 //检测content是否为数组 283 if(is_array($this->check())){ //content含分页符才分页 284 285 //总页数 286 return $this->totalPage = count($this->check()); 287 }else{ 288 289 return $this->totalPage = 1; 290 } 291 } 292 293 /*********************************分页***************************************/ 294 public function page(){ 295 296 //文章分页一般不多,所以只是用list_page.class.php中的style2作为分页样式 297 //返回页码 298 return $this->preOffset($preFonts,$this->prePage).$this->floOffset($nextFonts,$this->floPage).$this->getOtherInfo(); 299 } 300 } View Code在这个文件中包含检测是否含有分页符的方法,如果包含分页符,则把传入的内容按照分页符拆分,返回数组,否则返回字符串。
templates/js/ajax_arc.js
1 $(function(){ 2 3 //初始显示"下一页","末页" 4 showFloPage(); 5 6 //删除原先的li,插入gif 7 function ajaxpre(){ 8 9 //插入gif图 10 $loading = $("

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











오류의 원인은 urllib3 라이브러리의 예외 유형인 NameResolutionError(self.host,self,e)frome입니다. 이 오류의 원인은 DNS 확인에 실패했기 때문입니다. 해결을 찾을 수 없습니다. 이는 입력한 URL 주소가 정확하지 않거나 DNS 서버를 일시적으로 사용할 수 없기 때문에 발생할 수 있습니다. 이 오류를 해결하는 방법 이 오류를 해결하는 방법은 여러 가지가 있습니다. 입력한 URL 주소가 올바른지 확인하고 액세스할 수 있는지 확인하십시오. DNS 서버를 사용할 수 있는지 확인하십시오. 명령줄에서 "ping" 명령을 사용해 볼 수 있습니다. DNS 서버를 사용할 수 있는지 테스트하려면 프록시 뒤에 있는 경우 호스트 이름 대신 IP 주소를 사용하여 웹사이트에 액세스해 보세요.

1. 오늘 Toutiao에 기사를 게시하여 어떻게 돈을 벌 수 있습니까? 오늘 Toutiao에 기사를 게시하여 더 많은 수입을 얻는 방법! 1. 기본 권익 활성화: 기사의 원본은 광고를 통해 수익을 얻을 수 있으며, 동영상은 가로 화면 모드에서 원본이어야 수익을 얻을 수 있습니다. 2. 팬 100명 권리 활성화: 팬 수가 100명 이상에 도달하면 마이크로 헤드라인, 오리지널 Q&A 작성, Q&A 수익을 얻을 수 있습니다. 3. 독창적인 작품을 고집하라: 독창적인 작품에는 기사, 마이크로 헤드라인, 질문 등이 포함되며, 300단어 이상이어야 합니다. 불법 표절 저작물을 원작으로 출판할 경우 크레딧 점수가 차감되며, 수익금도 차감되므로 주의하시기 바랍니다. 4. 수직성: 전문 분야에서 기사를 작성할 때 분야를 넘나들며 마음대로 기사를 작성할 수 없으며 적절한 추천을 받을 수 없으며, 작품의 전문성과 정확성을 확보할 수 없으며 팬을 유치하기가 어렵습니다. 그리고 독자들. 5. 활동: 높은 활동,

차이점: 1. 정의가 다릅니다. url은 균일한 리소스 위치 지정자이고 html은 하이퍼텍스트 마크업 언어입니다. 2. html에는 여러 개의 URL이 있을 수 있지만 하나의 url에는 단 하나의 html 페이지만 존재할 수 있습니다. 웹 페이지이고 url은 웹 사이트 주소를 나타냅니다.

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

PHP 배열을 페이지화하는 가장 일반적인 두 가지 방법은 array_slice() 함수를 사용하는 것입니다. 건너뛸 요소 수를 계산한 다음 지정된 요소 범위를 추출합니다. 내장 반복자 사용: Iterator 인터페이스를 구현하고 rewind(), key(), current(), next() 및 valid() 메서드를 사용하여 지정된 범위 내의 요소를 탐색합니다.

Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 컨테이너 요소가 있는 페이지를 생성하고 Ajax 요청은 로드한 후 요소에 데이터를 추가합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 얻습니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.

객체 지향 프로그래밍이란 무엇입니까? 객체 지향 프로그래밍(OOP)은 실제 엔터티를 클래스로 추상화하고 객체를 사용하여 이러한 엔터티를 나타내는 프로그래밍 패러다임입니다. 클래스는 객체의 속성과 동작을 정의하고, 객체는 클래스를 인스턴스화합니다. OOP의 가장 큰 장점은 코드를 더 쉽게 이해하고 유지 관리하며 재사용할 수 있다는 것입니다. OOP의 기본 개념 OOP의 주요 개념에는 클래스, 개체, 속성 및 메서드가 포함됩니다. 클래스는 객체의 속성과 동작을 정의하는 객체의 청사진입니다. 객체는 클래스의 인스턴스이며 클래스의 모든 속성과 동작을 갖습니다. 속성은 데이터를 저장할 수 있는 개체의 특성입니다. 메소드는 객체의 데이터에 대해 작동할 수 있는 객체의 함수입니다. OOP의 장점 OOP의 주요 장점은 다음과 같습니다. 재사용성: OOP는 코드를 더 많이 만들 수 있습니다.
