码迷,mamicode.com
首页 > Web开发 > 详细

实现JQuery_Accordion功能

时间:2014-10-27 19:19:43      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   ar   使用   java   

1. 添加AJAX引用

bubuko.com,布布扣
<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控件)

bubuko.com,布布扣
  <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功能

bubuko.com,布布扣
<script type="text/javascript">
        $(function () {
            $("#dvAccordian").accordion();
        })
    </script>
View Code

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

bubuko.com,布布扣
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事件里面加载这个方法

bubuko.com,布布扣
  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindRepeater();
            }
        }
View Code

 

实现JQuery_Accordion功能

标签:style   blog   http   io   color   os   ar   使用   java   

原文地址:http://www.cnblogs.com/songxia/p/4054714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!