Персонализированный Аккордеон (как список Master-Details) - PullRequest
Новая
       7

Персонализированный Аккордеон (как список Master-Details)

0 голосов
/ 15 февраля 2012

Мне нужно создать элемент управления Accordion Ajax, который на первой панели имеет список записей. (например, пользователи). Когда веб-пользователи нажимают на одну из них, другие панели должны заполняться сведениями об этом пользователе. Например, если я щелкну первую запись, Pane2 будет заполнен LifeDetails, Pane3 - HomeDetails, Pane4 - JobDetails и так далее.

Кто-нибудь имеет представление о том, как это реализовать?

Большое спасибо.

Luigi

1 Ответ

0 голосов
/ 15 февраля 2012

Я бы попытался решить эту проблему, используя http://docs.jquery.com/UI/Accordion и http://pjax.heroku.com/ ...

Что-то вроде 

 <div id="accordion">
      <h3><a href="#">pane1</a></h3>
      <div>
          <ul id="persons">
              <li><a href="person1.aspx">Person 1</a></li>
              <li><a href="person2.aspx">Person 2</a></li>
              <li><a href="person3.aspx">Person 3</a></li>
          </ul>
      </div>
      <h3><a href="#">Life Details</a></h3>
      <div>
          Some content here
      </div>
      <h3><a href="#">Home Details</a></h3>
      <div>
          Some content here
      </div>
      <h3><a href="#">Job Details </a></h3>
      <div>
          Some content here
      </div>
 </div>

Для разметки. Тогда ваш JavaScript должен быть что-то вроде 

<script src="jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $("#accordion").accordion();
            $('.persons').pjax('#accordion');
    });
</script>

И в вашем aspx вы проверяете заголовок HTTP_X_PJAX (см. xhr.setRequestHeader('X-PJAX', 'true')), и если он присутствует, вы визуализируете только <div id="accordion"> для выбранного элемента (без мастер-страницы, просто div), если он отсутствует, вы отображаете всю страницу (с Masterpage).

...