jquery应用-AJAX推拽分页

/Files/guozili/SiteOSFile2.rar模仿视频网站首页ajax分页，结合neverModules-slider +jquery form插件实现拖动滑动块进行AJAX分页，此方法较灵活，另外可用2.0里面的CallBack机制实现同样的功能，预览和代码请见下：
(注释添加中.......)
预览：
<iframe width="500" height="500" style="width: 561px; height: 369px;" src="http://www.5533110.com/123/"></iframe>

代码：

default.aspx

<% @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default9.aspx.cs"Inherits="Default9" %>

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< style type ="text/css" media ="all" title ="Default" >
.imageSlider1{}{margin:0;padding:0;height:18px;width:400px;background-image:url("images/scrollbg.gif");}
.imageBar1{}{margin:0;padding:0;height:17px;width:10px;background-image:url("images/scrfloat.gif");}
body{}{background-color:#f5f5f5;}

div{}{color:#000;font-size:12px;}
</ style >

< script type ="text/javascript" src ="slider_extras.js" charset ="gb2312" ></ script >

< script type ="text/javascript" src ="jquery-latest.js" ></ script >

< script type ="text/javascript" src ="form.js" ></ script >

</ head >
< body >
< form id ="form1" action ="default10.aspx" method ="post" >
< input id ="pageindex" name ="pageindex" type ="hidden" value ="1" />

< div id ="content" >
</ div >

< div style ="height:100px;margin:10px;width:600px" >
< div style ="float:left;" >
< img src ="images/pre.gif" onclick ="sliderImage1.setValue(sliderImage1.getValue()-1)" /></ div >
< div id ="sliderDemo1" style ="height:40px;width:400px;float:left;" >
</ div >
< div style ="float:left;" >
< img src ="images/next.gif" onclick ="sliderImage1.setValue(sliderImage1.getValue()+1)" /></ div >
</ div >

< script type ="text/javascript" >
//<![CDATA[
//分页滑动条初始化
varsliderImage1=newneverModules.modules.slider({targetId:"sliderDemo1",
sliderCss:"imageSlider1",
barCss:"imageBar1",
min:1,
max:10,
hints:"movetheslider"
});
sliderImage1.onstart=function(){

};
sliderImage1.onchange=function(){

};
//滑动操作完成时1.该pageindex隐藏域的值，2.jquery进行提交数据
sliderImage1.onfinish=function(){
$("#pageindex").val(sliderImage1.getValue());
onSubmitPage();

};
sliderImage1.create();
sliderImage1.setValue(sliderImage1.min);
//jueryform插件postpageindex隐藏域的值,default10.aspx根据post过来的页值返回repeater生产的html
functiononSubmitPage()
{

varoptions={
target:'#content',//id=contentdiv用来加载返回的数据
success:functionSubmitSuccess(data){
$('#content').fadeIn('slow');//加载成功后content显示出来
}

};
$('#content').html('loading.');
$('#form1').ajaxSubmit(options);//ajax提交

}

//]]>
</ script >

</ form >
</ body >
</ html >

default10.aspx

<% @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default10.aspx.cs"Inherits="Default10" %>

< asp:repeater id ="Repeater1" runat ="server" >
< ItemTemplate >
<% #Eval("name") %>
< br />
</ ItemTemplate >
</ asp:repeater >

default10.aspx.cs

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Collections.Generic;
usingSystem.IO;
usingSystem.Globalization;

publicpartialclassDefault10:System.Web.UI.Page
{

protectedvoidPage_Load(objectsender,EventArgse)
{
getRepeaterHtml(Convert.ToInt32(Request.Form["pageindex"]));

}

privatevoidgetRepeaterHtml(intpage)
{

this.Repeater1.DataSource=getNameByPage(page);
this.Repeater1.DataBind();

}

privateIList < note > getNameByPage(intpage)
{
IList < note > notes=newList < note > ();
for(inti=10*(page-1)+1;i < =10 *page;i++)
{
notenote1 =new note();
note1.Name ="第" +i.ToString()+"条记录";
notes.Add(note1);
}
returnnotes;

}

publicclassnote
{
string_name;

publicstringName
{
get{returnthis._name;}
set{this._name =value; }
}

}
}

net2.0 callback实现：
default8.aspx

<% @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default8.aspx.cs"Inherits="Default8" %>

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< style type ="text/css" media ="all" title ="Default" >
.imageSlider1{}{margin:0;padding:0;height:18px;width:400px;background-image:url("images/scrollbg.gif");}
.imageBar1{}{margin:0;padding:0;height:17px;width:10px;background-image:url("images/scrfloat.gif");}
body{}{background-color:#f5f5f5;}

div{}{color:#000;font-size:12px;}
</ style >

< script type ="text/javascript" src ="slider_extras.js" charset ="gb2312" ></ script >

</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="content" >
< asp:Repeater ID ="Repeater1" runat ="server" >
< ItemTemplate >
<% #Eval("name") %>
< br />
</ ItemTemplate >
</ asp:Repeater >
</ div >
< div style ="height:100px;margin:10px;width:600px" >
< div style ="float:left;" >
< img src ="images/pre.gif" onclick ="sliderImage1.setValue(sliderImage1.getValue()-1)" /></ div >
< div id ="sliderDemo1" style ="height:40px;width:400px;float:left;" >
</ div >
< div style ="float:left;" >
< img src ="images/next.gif" onclick ="sliderImage1.setValue(sliderImage1.getValue()+1)" /></ div >
</ div >

< script type ="text/javascript" >
//<![CDATA[
varsliderImage1=newneverModules.modules.slider({targetId:"sliderDemo1",
sliderCss:"imageSlider1",
barCss:"imageBar1",
min:1,
max:10,
hints:"movetheslider"
});
sliderImage1.onstart=function(){

};
sliderImage1.onchange=function(){

};
sliderImage1.onfinish=function(){

CallServer(sliderImage1.getValue(),content);

};
sliderImage1.create();
sliderImage1.setValue(sliderImage1.min);

functionCallServer(arg,context)
{


<%=ClientScript.GetCallbackEventReference(this,"arg","ReceiveServerData","context")%>;
context.innerHTML="loading";

}

functionReceiveServerData(result,context)
{
context.innerHTML=result;

}


//]]>
</ script >

</ form >
</ body >
</ html >

default8.aspx.cs

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Collections.Generic;
usingSystem.IO;
usingSystem.Globalization;

publicpartialclassDefault8:System.Web.UI.Page,ICallbackEventHandler
{
privateintpage;

protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
this.Repeater1.DataSource=getNameByPage(1);
this.Repeater1.DataBind();
}

}

privateIList < note > getNameByPage(intpage)
{
IList < note > notes=newList < note > ();
for(inti=10*(page-1)+1;i < =10 *page;i++)
{
notenote1 =new note();
note1.Name ="第" +i.ToString()+"条记录";
notes.Add(note1);
}
returnnotes;

}



publicclassnote
{
string_name;

publicstringName
{
get{returnthis._name;}
set{this._name =value; }
}

}

privatestringgetRepeaterHtml(intpage)
{
this.Repeater1.DataSource =getNameByPage(page);
this.Repeater1.DataBind();
StringWriterwriter1 =new StringWriter(CultureInfo.InvariantCulture);
HtmlTextWriterwriter2 =new HtmlTextWriter(writer1);

this.Repeater1.RenderControl(writer2);
writer2.Flush();
writer2.Close();
returnwriter1.ToString();

}

#regionICallbackEventHandler成员

publicstringGetCallbackResult()
{

returngetRepeaterHtml(this.page);


}

publicvoidRaiseCallbackEvent(stringeventArgument)
{
this.page =Convert.ToInt32(eventArgument);
}

#endregion
}

/Files/guozili/tytgw.rar