实现JQuery_Accordion功能

1. 添加AJAX引用

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />

View Code

2. HTML 页面（使用Repeater控件）

  <div id="dvAccordian" style="width:500px">

 

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

            <ItemTemplate>

                <h3><%# Eval("Title") %></h3>  //绑定Title

            <div>

                <p><%# Eval("Content") %></p> //绑定Content

            </div>

            </ItemTemplate>

        </asp:Repeater>

</div>

View Code

3. 使用JQuery显示Accordion功能

<script type="text/javascript">

        $(function () {

            $("#dvAccordian").accordion();

        })

    </script>

View Code

4. 在后天代码中绑定Repeater控件

private void BindRepeater()

        {

            string constr = ConfigurationManager.ConnectionStrings["DemosDatabaseConnectionString"].ConnectionString;

            using (SqlConnection con = new SqlConnection(constr))

            {

                using (SqlCommand cmd = new SqlCommand())

                {



                    cmd.CommandText = "select Title,Content from AccordionContent";

                    cmd.Connection = con;

                    con.Open();

                    Repeater1.DataSource = cmd.ExecuteReader();

                    Repeater1.DataBind();

                    con.Close();

               }

            }

        }

View Code

5. 最后在Page_Load事件里面加载这个方法

  protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                BindRepeater();

            }

        }

View Code