一步步打造漂亮的新聞列表（無刷新分頁、內(nèi)容預(yù)覽）（4）

前面三篇文章實(shí)現(xiàn)了第一個(gè)目標(biāo)，即無刷新分頁。本文將實(shí)現(xiàn)第二個(gè)目標(biāo)，即預(yù)覽新聞內(nèi)容。有兩種方法可以實(shí)現(xiàn)內(nèi)容的預(yù)覽，一個(gè)是ajax，一個(gè)是偽ajax（姑且這么叫）。

我們先用偽ajax實(shí)現(xiàn)新聞內(nèi)容的預(yù)覽。方法很簡單，就是在讀取新聞列表的時(shí)候?qū)⒁A(yù)覽的內(nèi)容也讀取出來但不顯示在頁面里面，當(dāng)鼠標(biāo)移到鏈接上面時(shí)將預(yù)覽的內(nèi)容的顯示出來。實(shí)現(xiàn)起來也很簡單，

我們可以將預(yù)覽的內(nèi)容賦值給超鏈接標(biāo)簽里面的title屬性，然后在mousehover的時(shí)候顯示出來即可。下面就用這個(gè)方法實(shí)現(xiàn)新聞的預(yù)覽。

這里我們用到了一個(gè)jquery插件niceTitle

niceTitle是一款當(dāng)鼠標(biāo)移到超鏈接上面顯示提示的插件。我們可以使用該插件來實(shí)現(xiàn)新聞、文字的預(yù)覽。

這不是真正的預(yù)覽，在讀取文字列表的時(shí)候同時(shí)讀取每個(gè)文章的內(nèi)容概要（即想要預(yù)覽的內(nèi)容），然后使用該插件就可以實(shí)現(xiàn)假預(yù)覽。

效果圖如下，自己可以相應(yīng)修改

代碼如下：

$(function () {

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

});

</script>

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

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

并增加如下代碼以控制返回的是預(yù)覽的內(nèi)容而不是新聞的內(nèi)容：

//將dt中news_content的字?jǐn)?shù)都控制在300個(gè)字多余的使用...

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。修改前臺(tái)代碼

添加js文件和css文件

在ajax處理函數(shù)的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});//顯示預(yù)覽新聞內(nèi)容

}

ok，在運(yùn)行下代碼，看看是不是能夠預(yù)覽新聞內(nèi)容了呢？這個(gè)比較簡單，就不提供代碼下載了。

下面我們著重來看一下另一種真正的ajax預(yù)覽新聞內(nèi)容的實(shí)現(xiàn)方法：

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

主要修改如下：

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預(yù)覽了。下面來解釋下：

用到了這個(gè)tooltip（http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html）

它的這個(gè)方法

參數(shù)分別為當(dāng)前的事件、返回字符串的地址。于是我們只要將返回的字符串（即預(yù)覽的內(nèi)容寫入即可）。當(dāng)然要注意轉(zhuǎn)義字符的引用。

其實(shí)，主要的困難就是將讀取的東西顯示在超鏈接的旁邊（這個(gè)有現(xiàn)成的許多插件，當(dāng)然有興趣也可以自己去開發(fā)自己的tooltip）

okay，至此，這一系列的文章就告一段落。雖然項(xiàng)目很簡單，但是仍然有許多我們值得學(xué)習(xí)的地方：

如：按照軟件開發(fā)的一般流程去開發(fā)、必須先搞明白需求、寫代碼時(shí)要仔細(xì)等等。

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