使用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 MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
213 0
|
前端开发 数据可视化 Unix
好工具推荐系列:用好CSS/QSS可视化工具,实现Qt控件美化
好工具推荐系列:用好CSS/QSS可视化工具,实现Qt控件美化
1328 0
|
前端开发 JavaScript 容器
如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1003 0
|
前端开发 JavaScript Web App开发
如何用 CSS 创作一个立体滑动 toggle 交互控件
效果预览 在线演示 按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。 https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
861 0
|
JSON 前端开发 .NET
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
1017 0
热门文章
最新文章
相关产品
云迁移中心
推荐文章
更多