Question

我在我的asp.net应用程序中使用jquery UI手风琴控件。手风琴的数据来自数据库，每个数据库记录都有一个ID，一个标题字段和一个内容字段。标题是标题，内容是打开绘图时显示的数据...

我想像这样叫我的页面：

http://www.mywebsite.com/mypage.aspx?ID=123

并让其显示所有数据（就像现在一样），但是让手风琴的默认抽屉打开到与URL传入的ID号对应的部分...该页面大约有50个部分。

你有什么建议吗？我的问题涉及到jquery手风琴函数，其他的我都会了。那么，最好的位置在哪里用唯一的ID标记抽屉，并且使用什么样的javascript代码片段（我猜）来打开基于传递的ID的抽屉？

谢谢！

Answer 1

这是一个经过略微修改的示例文件，当您选择仅"core"和"accordion"选项从http://jqueryui.com/download 下载定制的JQuery UI构建文件时，您可以获得该文件。

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="css/smoothness/jquery-ui-1.7.custom.css" rel="stylesheet" />    
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });

                // can be done somewhere later in the code, after init
                $( #accordion ).accordion( activate  , "#a2");              
            });
        </script>

    </head>
    <body>
        <h2 class="demoHeaders">Accordion</h2>
        <div id="accordion">
            <div>
                <h3 id="a1"><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3 id="a2"><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3 id="a3"><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>
    </body>
</html>

选择器参数必须与您指定为“header”的元素匹配 - 在此示例中，它是具有ID的H3标记。运行此代码应该会打开第二个窗格。另一种方法是使用“active”选项在init中指定活动窗格：

<script type="text/javascript">
$(function(){    
    $("#accordion").accordion({ header: "h3", active :"#a2"  });
});
</script>

Answer 2

我假设你有一些像这样的HTML（我把ID放在A-Tag中）：

<div id="accordion">
  <div>
    <a id="a1" href="#">First header</a>
    <div>First content</div>
  </div>
  <div>
    <a id="a2" href="#">Second header</a>
    <div>Second content</div>
  </div>
</div>

你可以像这样激活手风琴：

$(function() {
    $("#accordion").accordion();
});

手风琴提供了一种激活特定窗格的方法：

Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass -1 to close all (only possible with collapsible:true).

那么你可以使用：

$("#accordion").accordion("activate", "a#a2");

通过脚本激活它。

Answer 3

你可以使用

$("#accordion").accordion( activate  , 1);

0 就是第一抽屉，1 就是第二抽屉，以此类推。

友情链接