前面三篇文章實(shí)現了第一個(gè)目標，即無(wú)刷新分頁(yè)。本文將實(shí)現第二個(gè)目標，即預覽新聞內容。有兩種方法可以實(shí)現內容的預覽，一個(gè)是ajax，一個(gè)是偽ajax（姑且這么叫）。
我們先用偽ajax實(shí)現新聞內容的預覽。方法很簡(jiǎn)單，就是在讀取新聞列表的時(shí)候將要預覽的內容也讀取出來(lái)但不顯示在頁(yè)面里面，當鼠標移到鏈接上面時(shí)將預覽的內容的顯示出來(lái)。實(shí)現起來(lái)也很簡(jiǎn)單，
我們可以將預覽的內容賦值給超鏈接標簽里面的title屬性，然后在mousehover的時(shí)候顯示出來(lái)即可。下面就用這個(gè)方法實(shí)現新聞的預覽。
這里我們用到了一個(gè)jquery插件niceTitle
niceTitle是一款當鼠標移到超鏈接上面顯示提示的插件。我們可以使用該插件來(lái)實(shí)現新聞、文字的預覽。
這不是真正的預覽，在讀取文字列表的時(shí)候同時(shí)讀取每個(gè)文章的內容概要（即想要預覽的內容），然后使用該插件就可以實(shí)現假預覽。
效果圖如下，自己可以相應修改
代碼如下：
<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中修改查詢(xún)條件和增加字符串的截取
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個(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。修改前臺代碼
添加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，在運行下代碼，看看是不是能夠預覽新聞內容了呢？這個(gè)比較簡(jiǎn)單，就不提供代碼下載了。
下面我們著(zhù)重來(lái)看一下另一種真正的ajax預覽新聞內容的實(shí)現方法：
這里跟以前的方法有些不太一樣的地方，用到的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預覽了。下面來(lái)解釋下：
用到了這個(gè)tooltip（http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html）
它的這個(gè)方法
<a href="#" onmouseover="ajax_showTooltip(window.event,'demo-pages/dragable-boxes.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a>
參數分別為當前的事件、返回字符串的地址。于是我們只要將返回的字符串（即預覽的內容寫(xiě)入即可）。當然要注意轉義字符的引用。
其實(shí)，主要的困難就是將讀取的東西顯示在超鏈接的旁邊（這個(gè)有現成的許多插件，當然有興趣也可以自己去開(kāi)發(fā)自己的tooltip）
okay，至此，這一系列的文章就告一段落。雖然項目很簡(jiǎn)單，但是仍然有許多我們值得學(xué)習的地方：
如：按照軟件開(kāi)發(fā)的一般流程去開(kāi)發(fā)、必須先搞明白需求、寫(xiě)代碼時(shí)要仔細等等。
如果大家有更好的方法或是更好的思路，要留言哦~~
好了 ,附下載的吧，還是建議新手要自己動(dòng)手做一遍
ajax-tooltip、 MyNewsList（全）
分享到代碼
