开发者社区> 技术mix呢> 正文

使用jQuery, CSS, JSON 和ASP.NET打造一个新闻轮换控件

简介:
+关注继续查看

    这个新闻轮换控件能在网页上的同一个地方显示几条新闻。新闻被拆开几页,为了放置在一个指定的区域。每一页也能包含一对新闻列表。 通过点击底部的页码,能够在不同的页面之间导航,点击页的每个新闻项,就能查看新闻的详细信息。新闻能像幻灯片一样去查看。它提供自动切换下一个(幻灯片)功能,以及过渡的样式。

使用JQuery为了:

    1、对web server进行JQuery Ajax Request请求,得到JSON格式新闻
    2、绑定数据(JSON格式的新闻)到HTML控件
    3、在数据binding之后设置控件的样式
    4、新闻之间的导航
    5、用户交互
    6、改变和设置样式
    7、实现javascript的效果

    新闻滚动控件使用ASP.NET从新闻存储(例如数据库,xml文件,rss,...)汇集新闻。将它转化成指定类型(NewsItem)。 然后将newsItem对象的集合转化成JSON格式的数据,作为新闻的数据来源发送到客户端。

    这个控件使用开源的Json.NET类库,它使JSON格式的数据在.NET中使用更加的方便。这个类库的关键的功能包括一个灵活的JSON序列化,能快速的将.net类转换成JSON ,将JSON转换成.net类。了解更多的Json.NET类库(代码。示例,和文档),点击这里

    新闻轮换控件主要使用 jQuery Image Rotator sample的思想。  通过Soh Tanaka 的描述,你能找到更多的关于如何去构造一个滚动的图片效果。

    这个新闻滚动控件使用 jQuery Cycle 插件来旋转新闻插件,它是一个轻量级的幻灯片插件,在页面上,这个插件为开发者提供强大的旋转能力来轮转不同类型的HTML控件。了解更多的 jQuery Cycle 插件,点击这里
你需要使用该控件:
1、引用必要的资源到你的HTML页面(.aspx页面):
代码

2、在你的.aspx页面中注册和嵌入TopNews.ascx控件。

代码

3、 一开始控件通过调用DOM尾部的JavaScript 的TopNews() 函数。 这个函数向服务端发送一个Ajax请求。得到JSON格式的新闻。然后将新闻绑定到控件上面。 在绑定之后,设置控件的样式,接着滚动新闻。

<script type="text/javascript">
    
new TopNews('#Container'7,true,6000);
</script>

 TopNews 函数参数描述:

复制代码
代码
TopNews function parameters:
parameter 1(objRoot): newsRotator control container (a jquery selector),
the control uses this parameter as a prefix (root object) of every
jquery selector inside the control.this prefix helps to have multiple instance
of control in the page without any worry of jquery selection conflict.
parameter 2(newsCountPerPage): number of news items in a page.
parameter 3(viewSubtitle): a boolean value makes subtitle section
of the control enable or disable. the rest of the news titles shows
in the subtitle section randomly at the bottom of the current page.
parameter 4(Interval): news rotation (slideshow) interval in millisecond.
复制代码

 4、 需要一个服务端来收集新闻。 然后将新闻转化成JSON格式,将它发送到客户端。 

      在客户端,我们使用Jquery发送一个Ajax请求去调用服务端的方法。

代码

 在服务器端,我们像下面这样去实现:

代码

代码:/Files/zhuqil/TopNews.rar

参考原文:http://www.codeproject.com/KB/applications/TopNews.aspx





本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/01/03/TopNews.html,如需转载请自行联系原作者

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

相关文章
在 ASP.NET 页面中使用 TreeView 控件
一、            下载源码 http://www.asp.net/IEWebControls/IEWebControls.exe   二、            安装及编译 1、执行安装文件后,在安装目录找到 “build.bat”文件,用记事本将其打开。
1098 0
一起谈.NET技术,分享在MVC3.0中使用jQuery DataTable 插件
  前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。
853 0
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.6 修改了几个小bug,使用演示。
     由于项目里面还在使用vs2003,还没有使用新的分页控件,所以对新的分页控件的测试还很不到位,遗留了不少的bug,感谢网友试用提出宝贵意见。由于项目正在收尾中,时间也不是太充裕,所以使用说明也不够详细。
824 0
“.NET技术”使用WCF实现SOA面向服务编程—— 架构设计
  SOA本身就是一种面向企业级服务的系统架构,简单来说,SOA就是一种进行系统开发的新的体系架构,在基于SOA架构的系统中,具体应用程序的功能是由 一些松耦合并且具有统一接口定义方式的组件(也就是service)组合构建起来的。
736 0
使用W“.NET技术”CF实现SOA面向服务编程——简单的WCF开发实例
  前面为大家介绍过WCF的特点,现在再讲解一下WCF基础概念。   在WCF里,各个Application之间的通信是由EndPoint来实现的,EndPoint是WCF实现通信的核心要素。一个WCF Service可由多个EndPoint集合组成,每个EndPoint只能有一种绑定,就是说EndPoint就是通信的入口,客户端和服务端通过 EndPoint交换信息。
746 0
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
942 0
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
简介:     AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便.  重要属性:     1、TargetControlID:指定要实现提示功能的控件。
832 0
下拉框控件dhtmlXCombo在ASP.NET中的使用详解
原文:http://blog.csdn.net/asengine11/article/details/6455267    在ASP.NET项目中经常会用到下拉框控件,但是ASP.NET提供的DropDownList控件不能修改样式,经常会与网站整体风格格格不入。
1006 0
WPF:使用Json.NET在TreeView中树形显示JSON数据
原文  WPF:使用Json.NET在TreeView中树形显示JSON数据 据 读者可以参考这个开源的可以树形显示XML和JSON的工具: Mgen Object 603:XML/JSON树形显示小工具 或者一个更大的开源工程(构建和分析HTTP并支持XML及JSON的树形显示): Mgen Bluckbadda   效果如下: (每一个项目中的左侧黑字是数据的值,右侧灰字是数据的类型。
1912 0
+关注
2968
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载