jquery应用AJAX推拽分页

jquery应用AJAX推拽分页


/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">
<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;  600px">
            <div style="float: left;">
                <img src="images/pre.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()-1)" /></div>
            <div id="sliderDemo1" style="height: 40px;  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;  600px">
            <div style="float: left;">
                <img src="images/pre.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()-1)" /></div>
            <div id="sliderDemo1" style="height: 40px;  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
相关阅读:
Java基础00-循环语句7
Java基础00-分支语句6
Java基础00-数据输入5
Java基础00-运算符4
Java基础00-基础语法3
Java基础00-第一个程序2
第十四题
 第十三题
 第十二题
 第十题
原文地址：https://www.cnblogs.com/guozili/p/793144.html