一步步打造漂亮的新闻列表(无刷新分页、内容预览)(4)
前面三篇文章实现了第一个目标,即无刷新分页。本文将实现第二个目标,即预览新闻内容。有两种方法可以实现内容的预览,一个是ajax,一个是伪ajax(姑且这么叫)。
我们先用伪ajax实现新闻内容的预览。方法很简单,就是在读取新闻列表的时候将要预览的内容也读取出来但不显示在页面里面,当鼠标移到链接上面时将预览的内容的显示出来。实现起来也很简单,
我们可以将预览的内容赋值给超链接标签里面的title属性,然后在mousehover的时候显示出来即可。下面就用这个方法实现新闻的预览。
这里我们用到了一个jquery插件niceTitle
niceTitle是一款当鼠标移到超链接上面显示提示的插件。我们可以使用该插件来实现新闻、文字的预览。
这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览。
效果图如下,自己可以相应修改
代码如下:
<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";
改为
并增加如下代码以控制返回的是预览的内容而不是新闻的内容:
2。修改前台代码
添加js文件和css文件
在ajax处理函数的success方法里面改为如下代码:
ok,在运行下代码,看看是不是能够预览新闻内容了呢?这个比较简单,就不提供代码下载了。
下面我们着重来看一下另一种真正的ajax预览新闻内容的实现方法:
这里跟以前的方法有些不太一样的地方,用到的js文件也不太一样。
主要修改如下:
ajax方法修改如下:
这样就可以是真正的ajax预览了。下面来解释下:
用到了这个tooltip(http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html)
它的这个方法
<a href="#" οnmοuseοver="ajax_showTooltip(window.event,'demo-pages/dragable-boxes.html',this);return false" οnmοuseοut="ajax_hideTooltip()">Info</a>
参数分别为当前的事件、返回字符串的地址。于是我们只要将返回的字符串(即预览的内容写入即可)。当然要注意转义字符的引用。
其实,主要的困难就是将读取的东西显示在超链接的旁边(这个有现成的许多插件,当然有兴趣也可以自己去开发自己的tooltip)
okay,至此,这一系列的文章就告一段落。虽然项目很简单,但是仍然有许多我们值得学习的地方:
如:按照软件开发的一般流程去开发、必须先搞明白需求、写代码时要仔细等等。
如果大家有更好的方法或是更好的思路,要留言哦~~
好了 ,附下载的吧,还是建议新手要自己动手做一遍
ajax-tooltip、 MyNewsList(全)
分享到代码
一步步打造漂亮的新闻列表(无刷新分页、内容预览)(4)相关推荐
- android表格自动刷新,IT之家安卓版v1.61:专栏新闻列表自动刷新
IT之家讯 12月5日消息,继上个版本对稳定性进行提升后,今天全新IT之家安卓客户端v1.61也正式与大家见面. 新版IT之家客户端主要增加了新闻列表自动刷新等功能,方便用户第一时间获取最新资讯信息: ...
- php 新闻分页,php jquery 实现新闻标签分类与无刷新分页
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页 现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 ...
- Repeater无刷新分页
网上摘录 前台: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- Asp.Net无刷新分页( jquery.pagination.js)
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可 ...
- java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
- Ajax实现无刷新分页效果
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- thinkphp+ajax无刷新分页并加载显示图片
2019独角兽企业重金招聘Python工程师标准>>> 最近自己用thinkphp和bootstrap做一个小站点,在用到ajax与后台数据库交互实现无刷新分页时,因为我需要返回的数 ...
最新文章
- Linux系统命令审计
- ChartPart 图表显示
- python自带超参调优包
- [C++][数据结构]栈(stack)的实现
- 计算机专业能用ipad吗,iPad 能不能代替电脑?说说我这 3 个月的使用体验
- 分布式和微服务区别_分布式、集群、微服务到底有啥区别?
- Java并发编程中锁的正确使用方法
- Android布局基础知识
- 分簇路由算法 LEACH算法
- Mac安装双系统后在Windows下体验mac原生触控功能(双指、三指、四指)
- 图解JanusGraph内部数据存储结构
- JS 实现列表移动(JQuery实现)
- Proof_Of_Work机制
- 第七十三集 KVM虚拟化☜(゚ヮ゚☜)
- SP2-0734: unknown command beginning lsnrctl st... - rest of line ignored.
- 三坐标检测之测量基准面的选择
- PoetryGenerator的参数
- 自动化功能测试-Athrun—IOS学习之旅文档
- 如何验证Java 布尔类型的true = 1 ,false = 0
- Python基础1——导入文件数据
热门文章
- java地铁线路规划_地铁线路规划——简单分析
- 支持的网卡列表_Windows 10的5G网卡折腾笔记(含采购链接)
- 有STC制作一个手持微型示波器
- 智能车竞赛第十六届比赛参赛同学提问-环境参数-5月15
- 树莓派小车python操作流程--龙邱科技
- 扩展32KRAM的STC8H8K信号采集版
- view for easyui 后台模板html_Thinkphp6模板引擎循环标签(五)
- java中的string函数_java中string.trim()函数的作用实例及源码
- 嵌入式linux内核编译感想,嵌入式Linux内核的交叉编译编译-基于2.6.26
- 冯珊珊_高球一姐【冯珊珊】签约【GREENJOY】成为品牌全球代言人