现在位置首页 / 项目实战 /正文

asp.net+jquery实现手机端列表及展示页面

作者: IT小兵 | 2015年3月18日| 热度:℃ | 评论: |参与:

今天分享一下asp.net+jquery实现手机端列表及展示页面。先看效果图:

1、列表


html:

<%@ Page Title="" Language="C#" MasterPageFile="~/Phone.master" AutoEventWireup="true"
    CodeBehind="ActivityListPhone.aspx.cs" Inherits="Kaitone.CommunityEBusiness.Web.Page.PublicActivity.ActivityListPhone" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="../../JScripts/fs_forse.js"></script>
    <link href="../../Css/activity.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="yxActivity"> 
        <!--标题开始-->
        <div class="titles">
            <a id="aBack" class="back" href="javascript:_history.go(-1);"><span>返回</span></a>
            <h2>常规活动列表</h2>
        </div>
        <!--标题结束--> 
        <!--排序开始-->
        <div class="actOrder layoutBox" style="display:none">
            <a ids="1" class="item box-col isActive" href="javascript:void(0);">正在进行</a>
            <a ids="2" class="item box-col" href="javascript:void(0);">未来活动</a>
            <a ids="3" class="item box-col" href="javascript:void(0);">往期活动</a>
        </div>
        <!--排序结束--> 
        <!--活动列表开始-->
        <div class="actList">
            <dl id="id-message-list"></dl>
        </div>
        <!--活动列表结束--> 
    </div>
    <!--ajax操作弹窗开始-->
    <div class="infoPop"  style="display:none;" id="actionPop"><span id="actionPopTxt" class="cont"></span></div>
    <!--ajax操作弹窗结束--> 
    <script type="text/javascript" src="../../BusinessJs/PublicActivity/ActivityListPhone.js"></script>
</asp:Content>

Js:

var pageSize = 100000;
var allCount = 0;
var currentPage = 0;
var flag = 1;
$(document).ready(function () {
    $("body").addClass("bodyBg");
    GetList(currentPage, flag);
    $(".item.box-col").bind("click", function () {
        $(this).nextAll().removeClass("isActive");
        $(this).prevAll().removeClass("isActive");
        if (!$(this).hasClass("isActive")) {
            $(this).addClass("isActive");
        }
        currentPage = 0;
        flag = $(this).attr("ids");
        GetList(currentPage, flag);
    });
});
function AlertMessage(msg) {
    $("#actionPopTxt").html(msg);
    $("#actionPop").css("display", "block").delay(1500).fadeOut();
}
function GetList(pageIndex,flag) {
    var ajaxUrl = "../../Service/PActivityHandler.ashx";
    pageIndex += 1;
    $.ajax({
        type: "post",
        dataType: 'json',
        url: ajaxUrl,
        data: {
            PageSize: pageSize,
            Operate: "list",
            CurrentPage: pageIndex,
            Flag: flag,
            StartTime: "2015-1-1",
            EndTime: "2018-1-1",
            KeyWord: $("#txtSearch").val(),
            CommunityId: requestparm("CommunityId"),
            OpenId: requestparm("OpenId")
        },
        success: function (data, textStatus) {
            if (data != null) {
                var msgs = eval(data);
                if (msgs != null && msgs != "undefined") {
                    allCount = msgs.TotalCount;
                    var html = "";
                    $.each(msgs.Instance, function (key, val) {
                        var alink = '<a href="ShowActivityPhone.aspx' + requestparms() + '&MaxNum=' + val.limitcount +  '&Id=' + val.id + '&IsEnroll=' + val.IsEnroll + '">';
                        html = html + '<dd><div class="header">';
                        html = html + ' <h5>' + alink + val.theme + '</h5>';
                        html = html + ' <p class="actTimes">时间:' + val.startdate.substr(0, 10) + '到' + val.enddate.substr(0, 10) + '</p>';
                        html = html + ' </div>';
                        html = html + ' <div class="section">';
                        html = html + '     <p class="summary">' + (val.describe == null ? "" : val.describe) + '</p>';
                         
                        if (val.logourl.length>0){
                            html = html + '     <p class="actPic">' + alink + '<img src="' + val.logourl + '"></p>';
                        }
                        html = html + ' </div></a>';
                        html = html + ' <div class="footer layoutBox">';
                        if (flag == 3 || val.IsEnroll == true) {
                            if(val.IsEnroll == true)
                                html = html + '     <p class="signNum box-col"><i></i>你已报名' + val.usercount + '</p>';
                            else
                                html = html + '     <p class="signNum box-col"><i></i>报名' + val.usercount + '</p>';
                        } else {
                            html = html + '     <a class="signNum box-col" href="ActivityEnrollPhone.aspx' + requestparms() + '&MaxNum=' + val.limitcount + '&IsEnroll=' + val.IsEnroll + '&Id=' + val.id + '"><i></i>报名' + val.usercount + '</a>';
                        }
                        html = html + '     <p class="box-col"></p>';
                        //html = html + '     <a class="commNum box-col" href="ShowActivityPhone.aspx' + requestparms() + '&MaxNum=' + val.limitcount + '&IsEnroll=' + val.IsEnroll + '&Id=' + val.id + '&aaa=1#btnComment"><i></i>评论' + val.commentcount + '</a>';
                        html = html + '</div></dd>';
                    });
                    //循环绑定table html。没办法。
                    if (html == "") html = "暂时没有符合条件的记录!";
                    $("#id-message-list").html(html);
                    //设置分页
                    if (currentPage == 0) {
                        var initPagination = function () {
                            // 创建分页
                            $("#Pagination").pagination(allCount, {
                                num_edge_entries: 1, //边缘页数
                                num_display_entries: 2, //主体页数
                                prev_text: "<<",
                                next_text: ">>",
                                callback: PageSelectCallback,
                                items_per_page: pageSize //每页显示1项
                            });
                        } ();
                        currentPage = 100;
                        if (allCount == 0) $('#divNumInfo').html("0-0条 共0条");
                    }
                }
                else {
                    AlertMessage("加载数据失败!"); return;
                }
            }
        },
        complete: function (XMLHttpRequest, textStatus) { },
        error: function (e) { AlertMessage("加载数据错误!"); return; }
    });
 
}
// --------分页按钮事件------------
$("#setoptions").click(function () {
    var opt = GetOptionsFromForm();
    // 重新创建分页参数
    $("#Pagination").pagination(length, opt);
});
function GetOptionsFromForm() {
    var opt = { callback: PageSelectCallback };
    return opt;
}
function PageSelectCallback(pageIndex, jq) {
    GetList(pageIndex,flag);
    return false;
}
//-----------------------------------


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询