一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）

前面三篇文章实现了第一个目标，即无刷新分页。本文将实现第二个目标，即预览新闻内容。有两种方法可以实现内容的预览，一个是ajax，一个是伪ajax（姑且这么叫）。

我们先用伪ajax实现新闻内容的预览。方法很简单，就是在读取新闻列表的时候将要预览的内容也读取出来但不显示在页面里面，当鼠标移到链接上面时将预览的内容的显示出来。实现起来也很简单，

我们可以将预览的内容赋值给超链接标签里面的title属性，然后在mousehover的时候显示出来即可。下面就用这个方法实现新闻的预览。

这里我们用到了一个jquery插件niceTitle

niceTitle是一款当鼠标移到超链接上面显示提示的插件。我们可以使用该插件来实现新闻、文字的预览。

这不是真正的预览，在读取文字列表的时候同时读取每个文章的内容概要（即想要预览的内容），然后使用该插件就可以实现假预览。

效果图如下，自己可以相应修改

代码如下：

   
   


    
    
<link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle.css" /> 

    
    
<script type="text/javascript" src="Scripts/jQuery.niceTitle.js"></script> 

    
    
<script type="text/javascript"> 

    
    
$(function () {  

    
    
$("a[class=info]").niceTitle();  

    
    
});  

    
    
</script> 

    
    
<a href='链接地址' title='预览的内容' class="info">链接名</a> 
   
   

需要在上一篇文章中修改如下地方：

1。在NewsHandler.ashx.cs中修改查询条件和增加字符串的截取

   
   


    
    
string cmdText = "select news_id,news_title,news_readtimes,news_time from " + table + " order by " + orderby + " desc";  
   
   

改为

   
   


    
    
string cmdText = "select * from " + table + " order by " + orderby + " desc"; 
   
   

并增加如下代码以控制返回的是预览的内容而不是新闻的内容：

   
   


    
    
//将dt中news_content的字数都控制在300个字多余的使用...  

    
    
if (dt != null || dt.Rows.Count > 0)  

    
    
{  

    
    
for (int i = 0; i < dt.Rows.Count; i++)  

    
    
{  

    
    
if (dt.Rows[i]["news_content"].ToString().Length > 300)  

    
    
{  

    
    
dt.Rows[i]["news_content"] = dt.Rows[i]["news_content"].ToString().Substring(0, 299) + "...";  

    
    
}  

    
    
}  

    
    
} 
   
   

2。修改前台代码

添加js文件和css文件

   
   


    
    
<link rel="Stylesheet" type="text/css" href="css/jQuery.niceTitle.css" />  

    
    
<script type="text/javascript" src="js/jQuery.niceTitle.js"></script> 
   
   

在ajax处理函数的success方法里面改为如下代码：

   
   


    
    
success:function(json) {   

    
    
$("#productTable tr:gt(0)").remove();  

    
    
var productData = json.News;  

    
    
$.each(productData, function(i, n) {  

    
    
var trs = "";  

    
    
trs += "<tr><td style='text-align:center'><a href=\"NewsRead.aspx?news_id="+n.news_id+"\" title='"+n.news_content+"' class=\"info2\" >" + n.news_title + "</a></td><td style='text-align:center'>" + n.news_readtimes + "</td><td style='text-align:center'>" + n.news_time + "</td></tr>";  

    
    
tbody += trs;  

    
    
});  

    
    
$("#productTable").append(tbody);  

    
    
//奇偶行颜色不同  

    
    
$("#productTable tr:gt(0):odd").attr("class", "odd");  

    
    
$("#productTable tr:gt(0):even").attr("class", "enen");  

    
    
$("a[class=info2]").niceTitle({maxWidth:500,urlSize:50});//显示预览新闻内容  

    
    
} 
   
   

ok，在运行下代码，看看是不是能够预览新闻内容了呢？这个比较简单，就不提供代码下载了。

下面我们着重来看一下另一种真正的ajax预览新闻内容的实现方法：

这里跟以前的方法有些不太一样的地方，用到的js文件也不太一样。

主要修改如下：

   
   


    
    
<script type="text/javascript" src="js/ajax-dynamic-content.js"></script> 

    
    
<script type="text/javascript" src="js/ajax.js"></script> 

    
    
<script type="text/javascript" src="js/ajax-tooltip.js"></script> 

    
    
<link type="text/css" rel="Stylesheet" href="css/ajax-tooltip-demo.css" /> 

    
    
<link type="text/css" rel="Stylesheet" href="css/ajax-tooltip.css" /> 
   
   

ajax方法修改如下：

   
   


    
    
$.each(productData, function(i, n) {  

    
    
var trs = "";  

    
    
trs += "<tr><td style='text-align:center'><a id=\""+n.news_id+"\" href=\"#id="+n.news_id+  

    
    
"\" class=\"info2\" title='' onmouseover='ajax_showTooltip(window.event,\"Ajax/\PreRead.aspx?news_id="+n.news_id+"\",this);return false' onmouseout=\"ajax_hideTooltip() \">" + n.news_title +  

    
    
"</a></td><td style='text-align:center'>" + n.news_readtimes +   

    
    
"</td><td style='text-align:center'>" + n.news_time + "</td></tr>";  

    
    
tbody += trs;  

    
    
}); 
   
   

这样就可以是真正的ajax预览了。下面来解释下：

用到了这个tooltip（http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html）

它的这个方法

   
   


    
    
<a href="#" onmouseover="ajax_showTooltip(window.event,'demo-pages/dragable-boxes.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a> 
   
   

参数分别为当前的事件、返回字符串的地址。于是我们只要将返回的字符串（即预览的内容写入即可）。当然要注意转义字符的引用。

其实，主要的困难就是将读取的东西显示在超链接的旁边（这个有现成的许多插件，当然有兴趣也可以自己去开发自己的tooltip）

okay，至此，这一系列的文章就告一段落。虽然项目很简单，但是仍然有许多我们值得学习的地方：

如：按照软件开发的一般流程去开发、必须先搞明白需求、写代码时要仔细等等。

如果大家有更好的方法或是更好的思路，要留言哦~~

好了 ,附下载的吧，还是建议新手要自己动手做一遍

ajax-tooltip、 MyNewsList（全）