實現JQuery_Accordion功能

標籤：style   blog   http   io   color   os   ar   使用   java   

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

 

實現JQuery_Accordion功能