|
|
也自己嘗試寫了一個(gè)，效果圖如下（樣式可以按用戶需求自己去整）：
接下來詳細(xì)介紹實(shí)現(xiàn)過程：
我一向是見招拆招的解決思路，這里需要運(yùn)用到3個(gè)東西――標(biāo)簽頁(yè)效果插件和分頁(yè)插件，jquery的getJson請(qǐng)求。
因此我使用了jquery-ui插件，jquery-page插件,現(xiàn)提供下載地址：
里面包含了3個(gè)JS腳本文件和2個(gè)樣式表:
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頁(yè)面代碼如下：
復(fù)制代碼 代碼如下:
<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>
頁(yè)面對(duì)ajax4.php,ajax5.php,ajax6.php三個(gè)頁(yè)面進(jìn)行了getJson請(qǐng)求，
這3個(gè)頁(yè)面代碼都差不多，無非是年份的分類而已，我這里沒做代碼優(yōu)化了，
實(shí)際完全可以放在同一個(gè)頁(yè)面里處理完，請(qǐng)求地址里附帶個(gè)參數(shù)就行了。
ajax.php代碼如下：
復(fù)制代碼 代碼如下:
<?php
header("content-type:text/html;charset:utf-8");
$db = @ mysql_connect("服務(wù)器主機(jī)地址","數(shù)據(jù)庫(kù)帳號(hào)","數(shù)據(jù)庫(kù)密碼");
mysql_select_db("數(shù)據(jù)庫(kù)名");
$rs=mysql_query("set names utf8");
//如果傳遞了pager參數(shù)
if(isset($_GET['pager']) && isset($_GET['count']))
{
echo GetPager($_GET['count'],$_GET['pager']);
}
else
{
echo "沒有傳入?yún)?shù)!";
}
function GetPager($count,$pager)
{
$begin = 開始時(shí)間;
$end = 結(jié)束時(shí)間;
$rs=mysql_query("SELECT * FROM 數(shù)據(jù)表 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)
{
//假設(shè) url字段為鏈接地址，title為新聞標(biāo)題，pubdate為發(fā)表時(shí)間
$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>";
//這個(gè)是新聞讀取的數(shù)量，不建議讀取太多
$num=40;
//新聞的總頁(yè)數(shù)取整
$num_string=ceil($num/$count);
//這里用鍵值對(duì)的方式 返回JSON格式的數(shù)據(jù)，0為新聞總頁(yè)數(shù)，1為拼接的HTML新聞頁(yè)面
$arr=array("0"=>$num_string, "1"=>$html_string);
$jarr=json_encode($arr);
echo $jarr;
}
?>
jquery_all.rar
php技術(shù)：php jquery 實(shí)現(xiàn)新聞標(biāo)簽分類與無刷新分頁(yè)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
