JQuery UI вопрос аккордеона - как бы вы подошли к этому? - PullRequest
Новая
       10

JQuery UI вопрос аккордеона - как бы вы подошли к этому?

1 голос
/ 15 марта 2009

Я использую аккордеонное управление jquery UI в одном из приложений asp.net. Данные для аккордеона поступают из базы данных, и каждая запись базы данных имеет идентификатор, поле заголовка и поле содержимого. Заголовок - это заголовок, а содержимое - это данные, которые отображаются при открытии розыгрыша ...

Я бы хотел, чтобы моя страница могла выглядеть так: 

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

и он отобразит все данные (как сейчас), но затем откроет «ящик» аккордеона по умолчанию, открытый для секции, которая соответствует номеру ID, переданному в URL ... их около 50 разделы на странице.

Есть предложения, как к этому подойти? Мои вопросы относятся к аккордеонной функции jquery, остальные я знаю. Так, где было бы лучшее место, чтобы «пометить» ящик с уникальными идентификаторами, а затем какой фрагмент кода javascript (я предполагаю), что я бы использовал «открыть» этот ящик на основе переданного идентификатора ??

Спасибо!

Ответы [ 3 ]

2 голосов
/ 15 марта 2009

Это слегка измененная версия файла примера, который вы получаете при загрузке пользовательской сборки JQuery UI со http://jqueryui.com/download с выбранными только "core" и "accordion". 

<!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>

аргумент селектора должен соответствовать элементу, который вы указали как «заголовок» - в этом примере это тег H3, который получил идентификатор. Запуск этого кода должен открыть вторую панель. Другой способ - указать активную панель в init с помощью опции «active»: 

<script type="text/javascript">
$(function(){    
    $("#accordion").accordion({ header: "h3", active :"#a2"  });
});
</script>
1 голос
/ 15 марта 2009

Я полагаю, у вас есть такой HTML-код (я поставил идентификатор в теге A): 

<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();
});

Аккордеон предоставляет метод для активации определенной панели:

Активировать контентную часть Аккордеон программно. Индекс может совпадать с нулевым индексом положение заголовка, чтобы закрыть или Селектор, соответствующий элементу. Проходить -1, чтобы закрыть все (возможно только с помощью collapsible: true).

так что вы можете использовать: 

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

для активации через скрипт.

0 голосов
/ 23 июня 2009

Вы можете использовать 

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

где 0 будет первым ящиком, 1 вторым и так далее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...