jquery应用-AJAX推拽分页

来源：互联网发布：网络诈骗金额累计吗编辑：程序博客网时间：2024/05/29 17:11

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

代码：

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">

<head>

.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>

</head>

<body>

</div>

</div>

</div>

//<![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">

<%# 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">

<head>

.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>

</head>

<body>

<asp:Repeater ID="Repeater1" runat="server">

<%# Eval("name") %>

<br />

</ItemTemplate>

</asp:Repeater>

</div>

</div>

</div>

//<![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