php jquery はニュースタグ分類と更新不要のページングを実装します

現在、jquery はますます広く使用されており、タグ分類 + 非リフレッシュ ページングの効果が多くの Web サイトのニュース セクションに実装されています。 私も自分で書いてみました。レンダリングは次のようになります (スタイルはユーザーのニーズに応じてカスタマイズできます)。

実装プロセスは以下で詳しく紹介されます:

ここで使用する必要があるのは、タブ効果プラグインとページング プラグイン、そして jquery の getJson リクエストの 3 つです。

そこで、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 ページのコードは次のとおりです:

コードをコピーします コードは次のとおりです: php + jquery ui + jquery pager $(document).ready(function(){ $('#tabs').tabs(); $.getJSON(" ajax4.php", { ページャー: 1, カウント: 10 },function(json){ $("#content1").html(json[1]); $("#pager1").pager({ ページ番号: 1, ページ数: json[0], buttonClickCallback: PageClick1 }); $.getJSON("ajax5.php",{ ページャー: 1, カウント: 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( { ページ番号: 1、ページ数: json[0]、ボタンクリックコールバック: PageClick3 }); PageClick1 = function(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 });本文> !-- タブ --> 2008 2007 このページは、ajax4.php、ajax5.php、および ajax6.php の 3 つのページに対して getJson リクエストを作成します。これらの 3 つのページのコードは、私がコードを実行したことがないだけです。ここでの最適化 同じページ上で処理した後、リクエストアドレスにパラメータを付けるだけで可能です。 ajax.php コードは次のとおりです:

コードをコピーします コードは次のとおりです: header("content-type:text/html;charset:utf-8"); $db = @ mysql_connect("サーバーホストアドレス", "データベースアカウント", "データベースパスワード"); $rs=mysql_query("set names utf8");ページャーパラメータが渡されます if(isset($_GET['pager']) && isset($_GET['count'])) { echo GetPager($_GET['count'],$_GET['pager' ]); } else { echo "パラメータが渡されていません!"

function GetPager($count,$pager) { $begin = 開始時間; rs=mysql_query("SELECT * FROM データ テーブル WHERE (pubdate BETWEEN $begin AND $end) ORDER BY pubdate DESC 制限 ".($pager-1)*$count.",".$count); =mysql_fetch_assoc($rs) ) { $temp[]=$r; } $html_string=" "; foreach($temp as $k=>$v) { //URL フィールドがリンク アドレスであると仮定します。ニュースのタイトル、pubdate は発行時刻です $html_string .=" ".$v ['title']." ".$v["pubdate"]." "; }

$html_string. =" "; //これはニュースの閲覧数です。読みすぎることはお勧めできません $num=40; //ニュース ページの合計数は四捨五入されます $num_string=ceil($num /$count); //JSON 形式のデータはキーと値のペアの形式で返されます。0 はニュース ページの合計数、1 はキーと値のペアの形式で返されます。結合された HTML ニュース ページです $arr=array("0"=>$num_string, "1"=>$html_string); echo $jarr; ?>

jquery_all.rar

http://www.bkjia.com/PHPjc/320905.html www.bkjia.com true http://www.bkjia.com/PHPjc/320905.html 技術記事

現在、jquery はますます広く使用されており、タグ分類 + 非リフレッシュ ページングの効果が多くの Web サイトのニュース セクションに実装されています。 私も自分で書いてみました。レンダリングは次のとおりです (スタイル... )

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

php jquery はニュースタグ分類と更新不要のページングを実装します_PHP チュートリアル