設置JQuery的手風琴標籤舉止怪異

所以我有一個div，我在這裏做一個手風琴：設置JQuery的手風琴標籤舉止怪異

<div id="accordion"> 
     <h3><a href="#">Process Details</a></h3> 
     <div> 
      <span style="display:none;" id="dialogProcessId"></span> 
      <b>Process:</b> <span id="dialogProcess"></span><br /> 
      <b>Run Time:</b> <span id="dialogRunTime"></span><br /> 
      <b>Running:</b> <span id="dialogRunning"></span><br /> 
      <b>Percent Completed:</b> <span id="dialogPercent"></span><br /> 
      <b>Status:</b> <span id="dialogStatus"></span><br /> 
      <b>Start Time:</b> <span id="dialogStart"></span><br /> 
      <b>Finish Time:</b> <span id="dialogFinish"></span><br /> 
      <b>Errors:</b> <span id="dialogErrors"></span><br /> 
      <b>Messages:</b> <span id="dialogMessages"></span><br /> 
      <b>Parameters:</b> <span id="dialogParameters"></span><br /> 
      <b>Dependencies:</b> <span id="dialogDependencies"></span> 
     </div> 
     <h3><a href="#">Edit Parameters</a></h3> 
     <div> 
      <table id="paramsTable"> 
       <tr> 
        <th style="display:none;"></th> 
        <th>Name</th> 
        <th>Value&nbsp;<span id="editParamValues" style="color:Blue; cursor:pointer; font-size:smaller;">Edit</span></th> 
        <th>Type</th> 
       </tr> 
      </table> 
     </div> 
     <h3><a href="#">View Dependencies</a></h3> 
     <div> 
      <table id="dependenciesTable"> 
       <tr> 
        <th>Run ID</th> 
        <th>Process Name</th> 
       </tr> 
      </table> 
     </div> 
     <h3><a href="#">View Messages</a></h3> 
     <div style="overflow:scroll;"> 
      <table id="messagesTable"> 
       <tr> 
        <th>Time Stamp</th> 
        <th>Message</th> 
        <th>Message Type</th> 
        <th>Exception</th> 
        <th>Inner Exception</th> 
        <th>Email</th> 
       </tr> 
      </table> 
     </div> 
    </div>

我做成手風琴這個像這樣：

$("#accordion").accordion();

這手風琴div不過是在另一個div，它變成一個JQuery UI對話框如下所示：

<div id="detailsDialog"> 
    <div id="accordion"> 

$("#detailsDialog").dialog({ 
     autoOpen: false, 
     title: 'Details', 
     height: 550, 
     width: 800, 
     modal: true, 
     buttons: { 
      "Clear History": function() { 
       clearHistory($('#dialogProcessId').text()); 
      }, 
      "Close": function() { 
       $(this).dialog("close"); 
      } 
     } 
    });

而且我在我的應用程序打開該對話框用這種方法：

function openDialog(id) { 
     //$("#accordion").accordion("option", "active", 0); 
     refreshDialog(id); 
     $("#detailsDialog").dialog("open"); 
     $('#accordion').mask('Loading...'); 
    }

的方法refreshDialog只是使AJAX調用，並填補了所有的不同div，span，並在手風琴divtext值，然後打開對話框。

我試圖在這個openDialog()方法中設置手風琴的索引，但是當我這樣做時，它使得它全部變小，並且一半打開，而且看起來很奇怪，當我嘗試切換到不同的手風琴索引時，他們都是非常小的東西。我這樣做放上這行的代碼openDialog：

$("#accordion").accordion("option", "active", 1);

我做錯什麼了嗎？

來源

2011-06-23 slandau

我找到了解決方案。我不得不每次都銷燬並重新制作手風琴openDialog，否則會在其他手風琴內重新創作手風琴。

基本上這麼簡單的東西的工作原理：

$("#accordion").accordion("destroy"); 
$("#accordion").accordion();

來源

2011-06-23 19:00:44 slandau

我想你打開對話框後需要調用accordion。看看這個jsfiddle並告訴我，這是否能解決您的問題或幫助。如果我誤解了，請告訴我。

來源

2011-06-23 17:50:31 mazlix

設置JQuery的手風琴標籤舉止怪異

回答

相關問題