個性化手風琴（如主要細節列表）

Question

我需要創建一個Accordion Ajax控件，該控件在第一個窗格中有一個記錄列表 （例如用戶）。 當網絡用戶在其中一個角色上點擊時，其他窗格必須填充此用戶的詳細信息。 例如，如果我在第一條記錄中點擊，Pane2將填充LifeDetails，帶有HomeDetails的Pane3，帶有JobDetails的Pane4等等。

任何人都有如何意識到這一點的想法？

非常感謝。

路易吉

Answer 1

我會嘗試解決這個使用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）。