0

我有一个日历控件,在选择相应的日期时,我需要在手风琴中将 Today's Due 和 Over due 显示为两个部分。我尝试添加带有样式的 div 以呈现手风琴的外观,但这会带来 UI 问题。目前,我正计划添加手风琴(Jquery)。因为,手风琴将在从日历控件中选择日期时显示。我在后面的代码中绑定手风琴div并将其转换为要显示的Json,同时选择相应的日期。添加div的代码如下:

[WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string CalenderBinderAccordian()
    {
        try
        {
            //Code to fetch ProductGroup is not shown
        foreach (var p in productGroup)
        {
            string todoString = "";
            int uniqueID = Guid.NewGuid().GetHashCode();
            todoString = "<div id='accordion' class='ui-accordion ui-widget ui-helper-reset' role='tablist'><h3><a href=#" + uniqueID + "><b>Due Today</b></a></h3>";
            todoString += "<div>";
            foreach (var t in p.todo)
            {
                var tempAmt = String.Empty;
                if ((t.Amount == null) || t.Amount == String.Empty)
                    tempAmt = "0";
                else
                    tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                todoCount++;
            }
            todoString += "</div>";
            var overDue = temps.Select(x => new { x.DueDate }).Distinct().ToList();
            int overDueCount = 0;
            uniqueID = Guid.NewGuid().GetHashCode();
            todoString += "<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3>";
            int todoCount1 = 1;
            todoString += "<div>";
            for (int i = 0; i < overDue.Count(); i++)
            {
                if ((Convert.ToDateTime(overDue[i].DueDate) - Convert.ToDateTime(p.dates)).Days < 0)
                {
                    overDueCount++;
                    var overDueList = temps.FindAll(x => x.DueDate.Equals(overDue[i].DueDate)).ToList();
                    foreach (var t in overDueList)
                    {
                        var tempAmt = String.Empty;
                        if ((t.Amount == null) || t.Amount == String.Empty)
                            tempAmt = "0";
                        else
                            tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                        todoString += "<p  style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount1.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                        todoCount++;
                        todoCount1++;
                    }
                }
            }
            todoString += "</div>";
            todoString = todoString + "</div>\",\"count\":\"" + todoCount + "\"},";
            jsonString = jsonString + String.Format("{{\"{0}\" : \"{1}\",\"{2}\" : \"{3}", "dates", p.dates, "todo", todoString);
            if (overDueCount.Equals(0))
            {
                jsonString = jsonString.Replace("<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3><div></div>", "");
            }
        }
        jsonString = jsonString.TrimEnd(',');
        jsonString = '[' + jsonString + ']';
        string data= jsonString;
        return data;
    }
    catch (Exception ex)
    {
        throw;
    }
}    

ascx页面中的代码如下:/

/Scripts for Calender control
           <script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="../../Content/jquery.calendarPicker.css" type="text/css" media="screen"/>
   <script type="text/javascript" src="../../Scripts/jquery.calendarPicker.js"></script>
    <link rel="stylesheet" href="../../Content/style.css" type="text/css" media="screen"/>
//Scripts for accordion
  <link rel="stylesheet" href="../../Content/jquery-ui.css" />
  <script  type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
  <script  type="text/javascript">
        $(function () {
            $("#accordion").accordion();
        });
    </script>
     <div class="calendercontent">
        <div id="dsel1" style="width:200px;">
            <a href="" onclick="calendarPicker1.changeDate(new Date())"></a>
            <span id="span1"></span>        
        </div>
        <img class="ref" src="../../Images/refresh_circle.gif" alt="refresh" title="refresh"/>
        <div id="todo"></div>
    </div> 

注意,当我在 ascx 页面中添加 div 数据时,手风琴工作正常,使用 fireBug 显示手风琴类。但是由于手风琴数据是在后面的代码中添加并使用 java 脚本显示的。下面显示的功能不是在职的。请帮助,我是 Jquery 的初学者。

<script  type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>
4

2 回答 2

1

这是因为当 DOM 准备好时会调用手风琴函数$(function () {......并且到那时动态添加的 div 不在 DOM 中......所以在显示动态生成的 div 后调用手风琴函数..

//code to display your dynamic div..
$("#addedDivID").accordion();  //call the accordion function (again) after that..
于 2013-01-15T05:57:10.780 回答
1

试试这个:

$(document).find("#accordion").accordion();
于 2013-01-15T06:03:42.220 回答