php + jquery ui插件 + jquery pager插件實(shí)現新聞的標簽分類(lèi) + 無(wú)刷新分頁(yè)

現在jquery的應用越來(lái)越廣泛了，在很多網(wǎng)站的新聞板塊都實(shí)現了標簽分類(lèi) + 無(wú)刷新分頁(yè) 的效果。

我也自己嘗試寫(xiě)了一個(gè)，效果圖如下（樣式可以按用戶(hù)需求自己去整）：

接下來(lái)詳細介紹實(shí)現過(guò)程：

我一向是見(jiàn)招拆招的解決思路，這里需要運用到3個(gè)東西——標簽頁(yè)效果插件和分頁(yè)插件，jquery的getJson請求。

因此我使用了jquery-ui插件，jquery-page插件,現提供下載地址：

jquery_all.rar

里面包含了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è)面代碼如下：

代碼

<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>


        
        <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è)面對ajax4.php,ajax5.php,ajax6.php三個(gè)頁(yè)面進(jìn)行了getJson請求，

這3個(gè)頁(yè)面代碼都差不多，無(wú)非是年份的分類(lèi)而已，我這里沒(méi)做代碼優(yōu)化了，

實(shí)際完全可以放在同一個(gè)頁(yè)面里處理完，請求地址里附帶個(gè)參數就行了。

ajax.php代碼如下：

代碼

<?php

    header("content-type:text/html;charset:utf-8");
    $db = @ mysql_connect("服務(wù)器主機地址","數據庫賬號","數據庫密碼");
    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 "沒(méi)有傳入參數!";
    }

    function GetPager($count,$pager)
    {

        $begin = 開(kāi)始時(shí)間;
        $end = 結束時(shí)間;

        $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為發(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è)是新聞讀取的數量，不建議讀取太多
        $num=40;
        //新聞的總頁(yè)數取整
        $num_string=ceil($num/$count);

        //這里用鍵值對的方式返回JSON格式的數據，0為新聞總頁(yè)數，1為拼接的HTML新聞頁(yè)面
        $arr=array("0"=>$num_string, "1"=>$html_string);
        $jarr=json_encode($arr);
        echo $jarr;

    }

?>

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

php + jquery ui插件 + jquery pager插件 實(shí)現新聞的 標簽分類(lèi) + 無(wú)刷新分頁(yè)

php + jquery ui插件 + jquery pager插件實(shí)現新聞的標簽分類(lèi) + 無(wú)刷新分頁(yè)