jquery Bulletin scrolling +ajax background get data _jquery

Source: Internet
Author: User
Tags setinterval
aspx
Copy Code code as follows:

<script src= "Http://www.cnblogs.com/js/jquery/jquery.js" type= "Text/javascript" ></script>
<script src= "Http://www.cnblogs.com/js/common/jquery.timers.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
var myar1;var myar2;
function Notice () {//Timer hot Promotions
var pdata = "nameparam=" +document.getelementbyid ("Nameparam"). value+ "¶m=1";
$.ajax ({
URL: "Util/mainutil.aspx",//Background processing class
Type: "POST",
Data:pdata,
DataType: "HTML",
timeout:10000,
Error:function (data) {},
Success:function (data) {
Because this Ajax is the timer control, every 5 minutes will automatically go to the background refresh. Remove the latest data.
All to reload data data, first stop all actions against the data.
$ ("#scrollDiv1"). Stop (true);
outputting data in a container
$ ("#scrollDiv1 > #ul1"). innerhtml= "";
HTML (data) is a method of jquery. is to parse and load the HTML code
$ ("#scrollDiv1 > #ul1"). HTML (data);
The SetInterval () method can call a function or a calculation expression in the specified period (in milliseconds). The <div class=spctrl></div> setinterval () method calls the function continuously until clearinterval () is called or the window is closed. The ID value returned by SetInterval () can be used as an argument to the Clearinterval () method.
Use the Myar variable to control the corresponding number in the output. And then the number executes the calling function. In this way, there will not be the feeling of the scrolling effect stuck when you replace the data. Good visual effect.
Although this may not be from the first update of the announcement began to show, both pros and cons.
Myar1 = SetInterval (' AutoScroll ("#scrollDiv1") ', 2000)
$ ("#scrollDiv1"). Hover (function () {clearinterval (MYAR1);}, function () {myar1 = SetInterval (' AutoScroll ("#scrollDiv1 ") ', 2000)}); When the mouse is put up, scroll to stop, the mouse left when scrolling start
The HOVER method is used to make your mouse stop while scrolling through a piece of data. The response stops the scrolling action. You can click to go to the super chain.
The function in the background: If you move the mouse again, start scrolling from the variable number you just made.
}
});
}
Timer control. Perform a content update every 5 minutes for a container
$ (function () {
$ ("#ul1"). EveryTime (300000, function (i) {//every 5 minutes
Notice ();
});
});
The loading order should be noted. First you have to wait for all the data to load. That is, after the Ajax fill, can be invoked. So window.onload or in the body of the onload can be
But $ (<span size= "-1" ><em>document) .ready</em> is different from the onload. $ (<span size= "-1" ><em>document). Ready is performed when the DOM framework is loaded. We have to wait for Ajax. So it can't be used here. </EM></SPAN></SPAN>
<span size= "-1" >//this is $ (<span size= "-1" ><em>document). Ready more stable writing. </EM></SPAN></SPAN>
<span size= "-1" >//jquery.noconflict (); JQuery (document). Ready (function () {});<br></span>
But some say
$ (document). Ready (function () {
Alert ("Hello");
});(1)
<body onload= "alert (' Hello ');" > (2)
The above two pieces of code are equivalent. But the benefit of code 1 is to do performance and logical separation. And you can do the same thing in different JS files, that is $ (document). Ready (FN) can appear repeatedly on one page without//conflict. Basically, many of jquery's plugin use this feature, and because of this feature, multiple plugin are used together.
Window.onload = function () {Notice ();}
function Notice2 () {//Timer hot Promotions
var pdata = "nameparam=" +document.getelementbyid ("Nameparam"). value+ "¶m=2";
$.ajax ({
URL: "Util/mainutil.aspx",//Background processing class
Type: "POST",
Data:pdata,
DataType: "HTML",
timeout:10000,
Error:function (data) {},
Success:function (data) {
$ ("#scrollDiv2"). Stop (true);
$ ("#scrollDiv2 > #ul2"). innerhtml= "";
outputting data in a container
$ ("#scrollDiv2 > #ul2"). HTML (data);
MYAR2 = SetInterval (' AutoScroll ("#scrollDiv2") ', 2000)
$ ("#scrollDiv2"). Hover (function () {clearinterval (MYAR2);}, function () {myar2 = SetInterval (' AutoScroll ("#scrollDiv2 ") ', 2000)}); When the mouse is put up, scroll to stop, the mouse left when scrolling start
}
});
}
$ (function () {
$ ("#ul2"). EveryTime (300000, function (i) {//every 5 minutes
Notice2 ();
});
});
function AutoScroll (obj) {
$ (obj). Find ("Ul:first"). Animate ({
MarginTop: " -25px"
}, function () {
$ (this). CSS ({margintop: "0px"}). Find ("Li:first"). Appendto (this);
});
}
</script>
<style type= "Text/css" >
UL, Li
{
margin:0;
padding:0;
}
#scrollDiv1
{
width:300px;
height:25px;
line-height:25px;
border: #ccc 0px solid;
Overflow:hidden;
}
#scrollDiv1 Li
{
height:25px;
padding-left:10px;
}
#scrollDiv2
{
width:300px;
height:25px;
line-height:25px;
border: #ccc 0px solid;
Overflow:hidden;
}
#scrollDiv2 Li
{
height:25px;
padding-left:10px;
}
</style>
<body link= "#000000" vlink= "#000000" alink= "#000000" onload= "Notice (); Notice2 () ">
<%--Head Part--%>
<table style= "margin-bottom:4px" cellspacing= "0" cellpadding= "0" width= "910" align= "center"
border= "0" >
<tbody>
<tr>
&LT;TD width= "910" height= "background=" "images/logo.jpg" >
<p align= "center" >
<b></b>
</td>
</tr>
<tr>
&LT;TD valign= "Bottom" background= "images/bar.jpg" height= ">"
<table height= "cellspacing=" 0 "cellpadding=" 0 "width=" 100% "align=" center "border=" 0 ">
<tbody>
<tr valign= "Middle" >
&LT;TD width= "8%" height= ">"
<div align= "Right" >
<font size= "2" > Bulletin:</font></div>
</td>
&LT;TD width= "46%" style= "line-height:145%" >
<div align= "left" id= "ScrollDiv1" >
<ul id= "UL1" >
</ul>
</div>
</td>
&LT;TD width= "46%" height= "style=" >
<div align= "left" id= "ScrollDiv2" >
<ul id= "Ul2" >
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<%--Head part End--%>
Background Util/mainutil.aspx.cs output corresponding HTML data
Using System;
Using System.Collections;
Using System.Configuration;
Using System.Data;
Using System.Linq;
Using System.Web;
Using System.Web.Security;
Using System.Web.UI;
Using System.Web.UI.HtmlControls;
Using System.Web.UI.WebControls;
Using System.Web.UI.WebControls.WebParts;
Using System.Xml.Linq;
Namespace Web.util
{
public partial class MainUtil:System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
Try
{
int k = Int. Parse (request["param"). ToString ());
Switch (k)
{
Case 1:
ToOne ();
Break
Case 2:
Totwo ();
Break
Default
Break
}
}
Catch {}
}
private void ToOne ()
{
Try
{
String st = String.Empty;
String companyName = request["Nameparam"]. ToString ();
DataTable dt1 = DBUtility.DbHelperSQL.Query ("Select Top (5) Title,id from bulletin table where typeid= ' 2 ' and creater= '" + companyName + "' ORDER by creattime Desc"). Tables[0];
for (int i = 0; i < DT1. Rows.Count; i++)
{
Make a hyperlink to a bulletin
St + + <li><b> <a style= ' color: #000000 ' href= ' detail.aspx? Commpanyserver=2&company= "+ companyName +" &id= "+ dt1. rows[i]["Id"]. ToString () + "' target= ' _blank ' > <font color= ' #FF3300 ' >" + dt1. rows[i]["Title"]. ToString () + "</font></a></b></li>";
}
showHTML (ST);
}
Catch {}
}
private void Totwo ()
{
Try
{
String st = String.Empty;
String companyname= request["Nameparam"]. ToString ();
DataTable dt2= DBUtility.DbHelperSQL.Query ("Select Top (5) Title,id from bulletin table where ID in" (select Top ID from Bulletin table where T Ypeid= ' 2 ' and creater= ' "+companyname+" ORDER by creattime Desc) Order by creattime ASC "). Tables[0];
Make a hyperlink to a bulletin
for (int i = 0; i < DT2. Rows.Count; i++)
{
St + + <li><b> <a style= ' color: #000000 ' href= ' detail.aspx? Commpanyserver=2&company= "+ companyName +" &id= "+ DT2. rows[i]["Id"]. ToString () + "' target= ' _blank ' ><font color= ' #FF3300 ' >" + DT2. rows[i]["Title"]. ToString () + "</font></a></b></li>";
}
showHTML (ST);
}
Catch {}
}
private void showHTML (string st) {
Response.ContentType = "text/html";//text/html, and Application/json are all output formats
Response.Write (ST);
Response.Flush ();
Response.close ();
}
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.