php jquery 实现新闻标签分类与无刷新分页


Posted in PHP onDecember 18, 2009

现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 的效果。
也自己尝试写了一个,效果图如下(样式可以按用户需求自己去整):

php jquery 实现新闻标签分类与无刷新分页 

接下来详细介绍实现过程:

我一向是见招拆招的解决思路,这里需要运用到3个东西——标签页效果插件和分页插件,jquery的getJson请求。

因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址:

jquery_all.rar 
 里面包含了3个JS脚本文件和2个样式表:
jquery-1.3.2.min.js
jquery.pager.js
jquery-ui-1.7.2.custom.min.js
jquery-ui-1.7.2.custom.css

Page.css
html页面代码如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>php + jquery ui + jquery pager</title> 
<link type="text/css" href="/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
<link rel="stylesheet" href="/css/page.css" type="text/css" /> 
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script> 
<script src="/js/jquery.pager.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
$('#tabs').tabs(); 
$.getJSON("ajax4.php",{ pager: 1, count: 10 },function(json){ 
$("#content1").html(json[1]); 
$("#pager1").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick1 }); 
}); 
$.getJSON("ajax5.php",{ pager: 1, count: 10 },function(json){ 
$("#content2").html(json[1]); 
$("#pager2").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick2 }); 
}); 
$.getJSON("ajax6.php",{ pager: 1, count: 10 },function(json){ 
$("#content3").html(json[1]); 
$("#pager3").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick3 }); 
}); 
}); 
PageClick1 = function(pageclickednumber) 
{ 
TestClick1(pageclickednumber); 
} 
function TestClick1(pageclickednumber) 
{ 
$.getJSON("ajax4.php",{ pager: pageclickednumber, count: 10 },function(json){ 
$("#content1").html(json[1]); 
$("#pager1").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick1 }); 
}); 
} 
PageClick2 = function(pageclickednumber) 
{ 
TestClick2(pageclickednumber); 
} 
function TestClick2(pageclickednumber) 
{ 
$.getJSON("ajax5.php",{ pager: pageclickednumber, count: 10 },function(json){ 
$("#content2").html(json[1]); 
$("#pager2").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick2 }); 
}); 
} 
PageClick3 = function(pageclickednumber) 
{ 
TestClick3(pageclickednumber); 
} 
function TestClick3(pageclickednumber) 
{ 
$.getJSON("ajax6.php",{ pager: pageclickednumber, count: 10 },function(json){ 
$("#content3").html(json[1]); 
$("#pager3").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick3 }); 
}); 
} 
</script> 
</head> 
<body> 
<!-- Tabs --> 
<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">2009年</a></li> 
<li><a href="#tabs-2">2008年</a></li> 
<li><a href="#tabs-3">2007年</a></li> 
</ul> 
<div id="tabs-1"> 
<div id="content1" ></div> 
<div id="pager1" ></div> 
</div> 
<div id="tabs-2"> 
<div id="content2" ></div> 
<div id="pager2" ></div> 
</div> 
<div id="tabs-3"> 
<div id="content3" ></div> 
<div id="pager3" ></div> 
</div> 
</div> 
</body> 
</html>

页面对ajax4.php,ajax5.php,ajax6.php三个页面进行了getJson请求,
这3个页面代码都差不多,无非是年份的分类而已,我这里没做代码优化了,
实际完全可以放在同一个页面里处理完,请求地址里附带个参数就行了。
ajax.php代码如下:
<?php 
header("content-type:text/html;charset:utf-8"); 
$db = @ mysql_connect("服务器主机地址","数据库帐号","数据库密码"); 
mysql_select_db("数据库名"); 
$rs=mysql_query("set names utf8"); 
//如果传递了pager参数 
if(isset($_GET['pager']) && isset($_GET['count'])) 
{ 
echo GetPager($_GET['count'],$_GET['pager']); 
} 
else 
{ 
echo "没有传入参数!"; 
} function GetPager($count,$pager) 
{ 
$begin = 开始时间; 
$end = 结束时间; 
$rs=mysql_query("SELECT * FROM 数据表 WHERE (pubdate BETWEEN $begin AND $end) ORDER BY pubdate DESC limit ".($pager-1)*$count.",".$count); 
while ($r=mysql_fetch_assoc($rs)) 
{ 
$temp[]=$r; 
} 
$html_string="<table cellpadding='0' border='0' align='center' width='400' style=' padding: 8px 4px 1px 10px; ' cellpacing='0'>"; 
foreach($temp as $k=>$v) 
{ 
//假设 url字段为链接地址,title为新闻标题,pubdate为发表时间 
$html_string.=" <tr height='22'><td valign='middle' width='*' class='tt2'><img align='middle' alt='*' src='/images/bullet.gif'/> <a target='_blank' href='".$v['url']."'>".$v['title']."</a></td><td align='right' width='100'>".$v["pubdate"]."</td></tr>"; 
} 
$html_string.="</table>"; 
//这个是新闻读取的数量,不建议读取太多 
$num=40; 
//新闻的总页数取整 
$num_string=ceil($num/$count); 
//这里用键值对的方式 返回JSON格式的数据,0为新闻总页数,1为拼接的HTML新闻页面 
$arr=array("0"=>$num_string, "1"=>$html_string); 
$jarr=json_encode($arr); 
echo $jarr; 
} 
?>

jquery_all.rar 
PHP 相关文章推荐
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
Apr 05 PHP
php中explode函数用法分析
Nov 15 PHP
php中获取主机名、协议及IP地址的方法
Nov 18 PHP
php自动提交表单的方法(基于fsockopen与curl)
May 09 PHP
PHP中使用foreach()遍历二维数组的简单实例
Jun 13 PHP
php自动载入类用法实例分析
Jun 24 PHP
php文件类型MIME对照表(比较全)
Oct 07 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
Nov 14 PHP
PHP实现搜索时记住状态的方法示例
May 11 PHP
PHP array_reduce()函数的应用解析
Oct 28 PHP
实例分析PHP将字符串转换成数字的方法
Jan 27 PHP
PHP压缩图片功能的介绍
Mar 21 PHP
PHP XML操作类DOMDocument
Dec 16 #PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
Dec 16 #PHP
php生成xml简单实例代码
Dec 16 #PHP
PHP 基本语法格式
Dec 15 #PHP
php遍历目录viewDir函数
Dec 15 #PHP
php csv操作类代码
Dec 14 #PHP
PHP开发过程中常用函数收藏
Dec 14 #PHP
You might like
PHP中trim()函数简单使用指南
2015/04/16 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PHP7修改的函数
2021/03/09 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
学习Node.js模块机制
2016/10/17 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Angular工具方法学习
2016/12/26 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
Python实现调度算法代码详解
2017/12/01 Python
python用什么编辑器进行项目开发
2020/06/17 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
国际政治个人自荐信范文
2013/11/26 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
小学生美德少年事迹
2014/02/02 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
李培根演讲稿
2014/05/22 职场文书
遗嘱范文
2015/08/07 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
话题作文之成长
2019/12/09 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python