首页 > 代码库 > 实现JQuery_Accordion功能
实现JQuery_Accordion功能
1. 添加AJAX引用
<script type="text/javascript" src=http://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src=http://www.mamicode.com/"http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script><link href=http://www.mamicode.com/"http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
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>
3. 使用JQuery显示Accordion功能
<script type="text/javascript"> $(function () { $("#dvAccordian").accordion(); }) </script>
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(); } } }
5. 最后在Page_Load事件里面加载这个方法
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindRepeater(); } }
实现JQuery_Accordion功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。