jquery应用-AJAX推拽分页-CSDN博客

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

代码：

default.aspx

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

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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[

//分页滑动条初始化

var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1",

sliderCss: "imageSlider1",

barCss: "imageBar1",

min: 1,

max: 10,

hints: "move the slider"

});

sliderImage1.onstart = function () {

};

sliderImage1.onchange = function () {

};

//滑动操作完成时 1.该pageindex隐藏域的值，2.jquery 进行提交数据

sliderImage1.onfinish = function () {

$("#pageindex").val(sliderImage1.getValue());

onSubmitPage();

};

sliderImage1.create();

sliderImage1.setValue(sliderImage1.min);

//juery form插件post pageindex隐藏域的值,default10.aspx根据post过来的页值返回repeater生产的html

function onSubmitPage()

{

var options = {

target: '#content', //id=content div 用来加载返回的数据

success: function SubmitSuccess(data){

$('#content').fadeIn('slow'); //加载成功后content显示出来

}

};

$('#content').html('loading

.');

$('#form1').ajaxSubmit(options); //ajax提交

}

//]]>

</ script >

</ form >

</ body >

</ html >

default10.aspx

<% @ Page Language="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

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Collections.Generic;

using System.IO;

using System.Globalization;

public partial class Default10 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

getRepeaterHtml(Convert.ToInt32(Request.Form["pageindex"]));

}

private void getRepeaterHtml(int page)

{

this.Repeater1.DataSource = getNameByPage(page);

this.Repeater1.DataBind();

}

private IList < note > getNameByPage(int page)

{

IList < note > notes = new List < note > ();

for (int i = 10 * (page - 1) + 1; i < = 10 * page; i++)

{

note note1 = new note();

note1.Name = "第" + i.ToString() + "条记录";

notes.Add(note1);

}

return notes;

}

public class note

{

string _name;

public string Name

{

get { return this._name; }

set { this._name = value; }

}

net2.0 callback实现：
default8.aspx

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

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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[

var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1",

sliderCss: "imageSlider1",

barCss: "imageBar1",

min: 1,

max: 10,

hints: "move the slider"

});

sliderImage1.onstart = function () {

};

sliderImage1.onchange = function () {

};

sliderImage1.onfinish = function () {

CallServer(sliderImage1.getValue(), content) ;

};

sliderImage1.create();

sliderImage1.setValue(sliderImage1.min);

function CallServer(arg, context)

{

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

context.innerHTML = "loading

}

function ReceiveServerData(result, context)

{

context.innerHTML = result;

}

//]]>

</ script >

</ form >

</ body >

</ html >

default8.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Collections.Generic;

using System.IO;

using System.Globalization;

public partial class Default8 : System.Web.UI.Page, ICallbackEventHandler

{

private int page;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.Repeater1.DataSource = getNameByPage(1);

this.Repeater1.DataBind();

}

private IList < note > getNameByPage(int page)

{

IList < note > notes = new List < note > ();

for (int i = 10*(page-1) + 1; i < = 10 * page; i++)

{

note note1 = new note();

note1.Name = "第" + i.ToString() + "条记录";

notes.Add(note1);

}

return notes;

}

public class note

{

string _name;

public string Name

{

get { return this._name; }

set { this._name = value; }

}

private string getRepeaterHtml(int page)

{

this.Repeater1.DataSource = getNameByPage(page);

this.Repeater1.DataBind();

StringWriter writer1 = new StringWriter(CultureInfo.InvariantCulture);

HtmlTextWriter writer2 = new HtmlTextWriter(writer1);

this.Repeater1.RenderControl(writer2);

writer2.Flush();

writer2.Close();

return writer1.ToString();

}

#region ICallbackEventHandler 成员

public string GetCallbackResult()

{

return getRepeaterHtml(this.page);

}

public void RaiseCallbackEvent(string eventArgument)

{

this.page = Convert.ToInt32(eventArgument);

}

#endregion

}

/Files/guozili/tytgw.rar