一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）-阿里云开发者社区

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

2017-11-14 1245

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

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

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

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

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

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

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

代码如下：

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

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

string cmdText = "select news_id,news_title,news_readtimes,news_time 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文件

在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文件也不太一样。

主要修改如下：

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;
});