使用jQuery, CSS, JSON 和ASP.NET打造一个新闻轮换控件
2010-01-08 00:00:00 来源:WEB开发网核心提示:查看原图(大图)这个新闻轮换控件能在网页上的同一个地方显示几条新闻,新闻被拆开几页,使用jQuery, CSS, JSON 和ASP.NET打造一个新闻轮换控件,为了放置在一个指定的区域,每一页也能包含一对新闻列表,新闻轮换控件主要使用 jQuery Image Rotator sample的思想, 通过Soh Tan
查看原图(大图)
这个新闻轮换控件能在网页上的同一个地方显示几条新闻。新闻被拆开几页,为了放置在一个指定的区域。每一页也能包含一对新闻列表。通过点击底部的页码,能够在不同的页面之间导航,点击页的每个新闻项,就能查看新闻的详细信息。新闻能像幻灯片一样去查看。它提供自动切换下一个(幻灯片)功能,以及过渡的样式。
使用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 的描述,你能找到更多的关于如何去构造一个滚动的图片效果。
更多精彩
赞助商链接