行使jQuery,CSS,JSON和ASP.NET建设消息轮换控件
发布时间：2018-08-18 21:28:19 所属栏目：业界 来源：站长网
导读：这个消息轮换控件能在网页上的统一个处所表现几条消息。消息被拆开几页，为了安排在一个指定的地区。每一页也能包括一对消息列表。 通过点击底部的页码，可以或许在差异的页面之间导航，点击页的每个消息项，就能查察消息的具体信息。消息能像幻灯片一样去查察
|
副问题[/!--empirenews.page--]
这个消息轮换控件能在网页上的统一个处所表现几条消息。消息被拆开几页，为了安排在一个指定的地区。每一页也能包括一对消息列表。 通过点击底部的页码，可以或许在差异的页面之间导航，点击页的每个消息项，就能查察消息的具体信息。消息能像幻灯片一样去查察。它提供自动切换下一个（幻灯片）成果，以及过渡的样式。
行使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页面）： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<%@ Register Src="~/TopNews.ascx" TagName="TopNews" TagPrefix="ctrl" %> <body> <form id="form1" runat="server"> <div> <ctrl:TopNews runat="server" id="TopNews1" /> </div> </form> </body> 2、在你的.aspx页面中注册和嵌入TopNews.ascx控件。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<%@ Register Src="~/TopNews.ascx" TagName="TopNews" TagPrefix="ctrl" %> <body> <form id="form1" runat="server"> <div> <ctrl:TopNews runat="server" id="TopNews1" /> </div> </form> </body> 3、 一开始控件通过挪用DOM尾部的JavaScript 的TopNews() 函数。 这个函数向处事端发送一个Ajax哀求。获得JSON名目标消息。然后将消息绑定到控件上面。 在绑定之后，配置控件的样式，接着转动消息。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<script type="text/javascript"> new TopNews('#Container', 7,true,6000); </script> Copy to Clipboard 引用的内容：[www.veryhuo.com]
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哀求去挪用处事端的要领。 Copy to Clipboard引用的内容：[www.veryhuo.com]
//call ASP.NET page method asynchronous (send and recives data in JSON format) PageMethod: function(fn, paramArray, successFn, errorFn) { var pagePath = window.location.pathname; var that = this; //Call the page method $.ajax({ type: "POST", url: pagePath + "?Callback=" + fn, contentType: "application/json; charset=utf-8", data: paramArray, dataType: "json", //that is a reference to the object calling this callback method success: function(res) { successFn(res, that) }, error: errorFn }); } （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
