PHP+Mysql+jQueryダイナミック展示情報の実現

このサイトの前にある記事では、発表のための微博をどのように実現するかを紹介しています。PHP+Mysql+jQueryがマイクロブログプログラムを発表することを実現しました。--jQuery篇は、本例ではそのデータベース構造に基づいて、発表されたチャット情報を動的に表示します。
表示例：DEMO XHTML

 
<div id="demo"> 
<div class="saylist"> 
<a href="#"><img src="images/0.jpg" width="50" height="50" alt="demo" /></a> 
<div class="saytxt"> 
<p><strong><a href="https://www.jb51.net">Shuro</a></strong><span> 
8   </span>  ：</p> 
<div class="say">    。。。</div> 
</div> 
</div> 
... 
</div> 

上記HTML構造はN個.saylistから構成されており、ユーザのコメント情報を表示するために使用されるが、もちろん本例ではPHPがこのXHTMLコードの生成に責任を負う。CSS

 
#demo{width:400px; height:80px; margin:80px auto; border-bottom:1px dotted #d3d3d3} 
.saylist{margin:8px auto; height:80px; padding:4px 0;} 
.saylist img{float:left; width:50px; margin:4px} 
.saytxt{float:right; width:320px; overflow:hidden} 
.saytxt p{line-height:18px} 
.saytxt p strong{margin-right:6px} 
.saytxt p span{color:#999} 
.say{margin-top:3px; font-size:14px; font-weight:bold} 

は上述のCSSを使ってHTMLの外観をレンダリングします。もちろん、あなたが好きな外観スタイルを自分でカスタマイズすることもできます。PHPはfunction.phpにおいて2つの関数があり、formatiy（）はユーザーコメントリスト、すなわち上記のHTMLを出力するために使用されます。

 
function formatSay($say,$dt,$uid){ 
$say=htmlspecialchars(stripslashes($say)); 
return' 
<div class="saylist"><a href="#"><img src="images/'.$uid.'.jpg" width="50" 
height="50" alt="demo" /></a> 
<div class="saytxt"> 
<p><strong><a href="#">demo_'.$uid.'</a></strong> <span>'.tranTime($dt).'</span>  ： 
</p><div class="say">'.$say.'</div> 
</div> 
<div class="clear"></div> 
</div>'; 
} 

時間軸関数trnTime（）は時間を「1時間前」のようなフォーマットに変換します。詳細は本サイトの記事を読むことができます。PHPは時間軸関数

 
function tranTime($stime) { 
$rtime = date("m-d H:i",$stime); 
$htime = date("H:i",$stime); 
$day_time = date("j",$stime); 
$today=date("j",time()); 
$ds = $today - $day_time; 
$time = time() - $stime; 
if ($time < 60) { 
$str = '  '; 
} 
elseif ($time < 60 * 60) { 
$min = floor($time/60); 
$str = $min.'   '; 
} 
elseif ($time < 60 * 60 * 24) { 
$h = floor($time/(60*60)); 
$str = $h.'    '.$htime; 
if($ds==1) 
$str = '   '.$rtime; 
} 
elseif ($time < 60 * 60 * 24 * 2) { 
$str = '   '.$rtime; 
if($ds==2) 
$str = '   '.$rtime; 
}elseif($time < 60 * 60 * 24 * 3){ 
$str = '   '.$rtime; 
if($ds>2) 
$str = $rtime; 
} 
else { 
$str = $rtime; 
} 
return $str; 
} 

を実現し、index.phpでFnciton.phpを呼び出し、MySQLデータベースに接続してコメントリストを出力します。

 
require_once('connect.php'); //        
require_once('function.php'); //     
$query=mysql_query("select * from say order by id desc limit 0,15"); 
while ($row=mysql_fetch_array($query)) { 
$sayList.=formatSay($row[content],$row[addtime],$row[userid]); 
} 

コメントリストをdiv𞈻demoに出力します。

 
<div id="demo"> 
<?php echo $sayList;?> 
</div> 

このようにすると、index.phpを実行してリストが現れます。私たちは一つの展示が必要です。下にはjQueryが必要です。jQuery

 
$(function(){ 
//       saylist,       
$(".saylist").hide().eq(0).show(); 
//     ，       
(function showNextSay(){ 
//      7.5  
$(".saylist:visible").delay(7500).fadeOut("slow",function(){ 
$(this).appendTo("#demo"); 
//      
$(".saylist:first").fadeIn("slow",function(){ 
//       
showNextSay(); 
}); 
}); 
})(); 
});