激活多个手风琴面板

时间:2013-05-24 01:33:45

标签: jquery asp.net dynamic accordion

我有一个ASPX中继器创建一个手风琴。当用户点击页面时,我检查数据库并查看哪些部分适用于用户。我想根据“hasAppied”字段预先选择手风琴的一个或多个部分,让其他部分关闭。

 <div id="accordion">
  <asp:Repeater ID="rptAccordion" runat="server">
   <ItemTemplate>                             
    <div class="accordion"><h4><a href="#<%# DataBinder.Eval(Container.DataItem,"Name") %>"><%# (Boolean.Parse(Eval("HasApplied").ToString())) ? "<b>" : ""%><%# DataBinder.Eval(Container.DataItem,"Name") %></b></a></h4><div>
     <asp:Repeater ID="rptGoals" runat="server"  DataSource='<%# Eval("References") %>'>
      <ItemTemplate>
       <div style="display:block;"><asp:CheckBox ID="chkAction" runat="server" Enabled='true' Text='<%# DataBinder.Eval(Container.DataItem,"Description") %>' /></div>
      </ItemTemplate>
     </asp:Repeater>
    </div>
   </ItemTemplate>
  </asp:Repeater>
 </div>
<script type="text/javascript">
  $(".accordion").accordion({ collapsible: true, active: false, icons: { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s"} });
</script>

` 我尝试将其作为序数来解决。我尝试使用name字段将id应用于div(Class = accordion)。我还尝试将名称添加到锚标记并通过查询字符串对其进行寻址。似乎没什么用。我可能错过了一步。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我明白了!我必须命名手风琴的各个部分,然后从后面的代码创建JQuery单击事件以填充文字。这是解决方案的一面。

<div id="accordion" name="accordion"> 
     <asp:Repeater ID="rptAccordion" runat="server" OnItemCreated="rptAccordion_ItemCreated" >
         <ItemTemplate>
             <div class="accordion"><a id="section<%# i-1 %>" href="#"> Accordion header stuff </a><div>
             <div> panel stuff </div>
         </ItemTemplate>
     </asp:Repeater>
</div>
<script type="text/javascript">
    $(".accordion").accordion({ collapsible: true, active: false, icons: { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s"} });

    $(document).ready(function () {
        <asp:Literal ID="ltJsShowBlock" runat="server" />
    });    
</script>

然后在后面的代码中,在项目创建事件中增加i。

public void rptAccordion_ItemCreated(object sender, RepeaterItemEventArgs e)
{
   i++;
}

然后创建cicks并将字符串分配给文字。

private void preselectAccordion(List<sectiondata> sections)
    {
        var js = string.Empty;
        string format = @"$(""#section*"").click(); ";
        for (int i = 0; i < sections.Count; i++)
        {
            if (sections[i].meetsCondition == true)
            {
                js += format.Replace("*", i.ToString());
            }
        }

        ltJsShowBlock.Text = js;
    }