zoukankan      html  css  js  c++  java
  • 实现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="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
  • 相关阅读:
    docker-compose命令简介及安装
    Dockerfile文件常用指令详解
    Keras API记录
    EM(最大期望)算法推导、GMM的应用与代码实现
    K均值聚类和代码实现
    Keras DEMO
    多元函数链式法则与反向传播算法的实例推演
    神经网络中常用的激活函数
    TIKZ——LaTeX基本绘图
    python 爬虫基本玩法,统计杭电oj题目正确率并排序
  • 原文地址:https://www.cnblogs.com/songxia/p/4054714.html
Copyright © 2011-2022 走看看