This news rotation control displays several pieces of news in the same place on the webpage. News is split several pages to be placed in a specified area. Each page also contains a pair of news lists. By clicking the page number at the bottom, you can navigate between different pages and click each news item on the page to view the details of the news. News can be viewed like slides. It provides the function of automatically switching the next slide and a transitional style.
Use JQuery:
1. Make a JQuery Ajax Request to the web server to obtain news in JSON format. 2. Bind data (news in JSON format) HTML Control 3. Set the control style after data binding 4. navigation between News 5. User Interaction 6. Change and set the style 7. Implement javascript effect the news rolling control uses ASP. NET from news storage (such as databases, xml files, rss ,...) collect news. Convert it to the specified type (NewsItem ). Then, the newsItem object set is converted into JSON data and sent to the client as the news data source.
This control uses the open-source Json. NET class library, which makes it easier to use JSON data in. NET. The key functions of this Class Library include flexible JSON serialization, which can quickly convert. net classes to JSON and JSON to. net classes. Learn more about the Json. NET class library (code. Example, and document), click here.
The news scroll control mainly uses the idea of jQuery Image Rotator sample. With Soh Tanaka's description, you can find more information about how to construct a scrolling image.
This news scroll control uses the jQuery Cycle plug-in to rotate the news plug-in. It is a lightweight slide plug-in, on the page, this plugin provides developers with powerful rotation capabilities to rotate different types of HTML controls. For more information about the jQuery Cycle plugin, click here. You need to use this control: 1. Reference necessary resources to your HTML page (. aspx page ):
Copy to ClipboardReference: [www.bkjia.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. Register and embed the TopNews. ascx control on your. aspx page.
Copy to ClipboardReference: [www.bkjia.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. At the beginning, the control calls the JavaScript TopNews () function at the end of the DOM. This function sends an Ajax request to the server. Get the news in JSON format. Then, bind the news to the control. After binding, set the style of the control and then scroll the news.
Copy to ClipboardReference: [www.bkjia.com] <script type = "text/javascript">
New TopNews ('# iner', 7, true, 6000 );
</Script>
Copy to ClipboardReference: [www.bkjia.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. A server is required to collect news. Then, convert the news into JSON format and send it to the client.
On the client side, we use Jquery to send an Ajax request to call the method on the server side.
Copy to ClipboardReference: [www.bkjia.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
});
}
On the server side, we implement it as follows:
Copy to ClipboardReference: [www.bkjia.com] protected void Page_Load (object sender, EventArgs e)
{
// *** Route to the Page level callback 'handler'
This. HandleCallbacks ();
}
// Callback routing
Public void HandleCallbacks ()
{
If (string. IsNullOrEmpty (Request. Params ["Callback"])
Return;
// *** We have an action try and match it to a handler
Switch (Request. Params ["Callback"])
{
Case "fetchAllNews ":
This. FetchAllNews ();
Break;
}
Response. StatusCode = 500;
Response. Write ("Invalid Callback Method ");
Response. End ();
}
Public void FetchAllNews ()
{
List <NewsItem> lsttst = new List <NewsItem> ();
Lsttst. Add (new NewsItem ("Environment of Australia ",
This. ResolveUrl ("~ /Img/news1.jpg "),
This. ResolveUrl ("~ /Img/news1_thumb.jpg "),
"Australia has a rich variety of endemic legume
Species that thrive in nutrient-poor soils because
Of their symbiosis with rhizobia bacteria and mydeskhizal fungi ",
DateTime. Now. tow.datestring ()));
Lsttst. Add (new NewsItem ("Economy of Australia ",
This. ResolveUrl ("~ /Img/news2.jpg "),
This. ResolveUrl ("~ /Img/news2_thumb.jpg "),
"The specified Alian dollar is the currency of
Commonwealth of Australia, including Christmas Island,
Cocos (Keeling) Islands, and Norfolk Island ",
DateTime. Now. tow.datestring ()));
Lsttst. Add (new NewsItem ("Demographics of Australia and
Immigration to Australia ", this. ResolveUrl ("~ /Img/news3.jpg "),
This. ResolveUrl ("~ /Img/news3_thumb.jpg "),
"Most of the estimated 21.8 million specified alians are
Descended from colonial-era settlers and post-Federation
Immigrants from Europe ", DateTime. Now. tow.datestring ()));
Lsttst. Add (new NewsItem ("Religion in Australia ",
This. ResolveUrl ("~ /Img/news4.jpg "),
This. ResolveUrl ("~ /Img/news4_thumb.jpg "),
"Australia has no state religion. In the 2006 census,
64% of invalid alians were listed as Christian
Any denomination, including 26% as Roman Catholic and
19% as Anglican ", DateTime. Now. tow.datestring ()));
Lsttst. Add (new NewsItem ("Education in Australia ",
This. ResolveUrl ("~ /Img/news5.jpg "),
This. ResolveUrl ("~ /Img/news5_thumb.jpg "),
"School attendance is compulsory throughout Australia.
In most catalog Alian States at 5-6 years of age all children
Receive 11 years of compulsory education ",
DateTime. Now. tow.datestring ()));
Response. ContentType = "application/json; charset = UTF-8 ";
Response. Write (JavaScriptConvert. SerializeObject (lsttst ));
Response. End ();
}
Code: TopNews.rar
Http://www.codeproject.com/KB/applications/TopNews.aspx ()
Yahoo News rotation controls: http://www.codeproject.com/KB/applications/YahooNewsRotator_.aspx
Author: Zhu Yulin Source: http://zhuqil.cnblogs.com
