如何在jquery中動態創建JPanel？

我嘗試使用jPanel作爲可摺疊面板，從xml內容動態地顯示，但動態創建的面板不出現。見下面如何在jquery中動態創建JPanel？

enter image description here

我容器的圖像

<div id="detailTable" style="width:100%;"> 

</div> 

<!--Creating panels (Same thing if i create manually it is created, see the image)--> 
<div title="General Properties" class="class"> 
      ad 
</div> 
<div title="Other Properties" class="class"> 
    ad1 
</div>

jQuery的

$('.class').jPanel({ 
     'effect' : 'fade', 
     'speed'  : 'slow', 
     'easing' : 'swing' 
    }); 


//when the user clicks on `Server` (left hand side) the below code is triggered 
$('#detailTable').empty(); 
    $('<div>') 
    .html('<div class="titleBlue">Configuration&gt;'+productname+'&gt;Server</div>'+ 
      '<div title="General Properties" class="class">'+ //Creating panels dynamically 
       '<table style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">'+ 
        '<tbody>'+ 
         '<tr>'+ 
          '<th style="width:22%" align="left">Version</th>'+ 
          '<td style="align="left">'+infa9_pm_version+'</td>'+ 
         '</tr>'+ 
        '</tbody>'+ 
       '</table>'+ 
      '</div>'+ 
      '<div title="Other Properties" class="class">'+ 
       '<table style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">'+ 
        '<tbody>'+ 
         '<tr>'+ 
          '<th style="width:22%" align="left">Home</th>'+ 
          '<td style="align="left">test</td>'+ 
         '</tr>'+ 
        '</tbody>'+ 
       '</table>'+ 
      '</div>')  
    .appendTo('#detailTable');

更新：

這讓我太

$('#detailTable').empty(); 
    $('<div>') 
    .html('')  
    .appendTo('#detailTable').delay(10).queue(function(){ 
     $('.class').jPanel({ 
      'effect' : 'fade', 
      'speed'  : 'slow', 
      'easing' : 'swing' 
     }); 
    });

來源

2011-11-11 abi1964

當您動態追加內容時，應該使用JQuery live。

樣機上點擊的JPanel的類關聯 -

$('.class').live('click', function(){ 
    $(this).jPanel({ 
     'effect' : 'fade', 
     'speed'  : 'slow', 
     'easing' : 'swing' 
    });.focus(); 
    $(this).removeClass('class'); 
});

要觸發程序使用JQuery trigger。

$('.class').trigger('click');

來源

2011-11-11 11:58:53 Jayendra

嗨，謝謝你的回答，但面板只有在我點擊div時纔會出現，如何才能在創建後立即顯示？ – abi1964

您可以通過編程方式觸發點擊。更新了答案。 – Jayendra

謝謝，'.delay（10）.queue'也幫助我..查看我更新的問題 – abi1964

你可以做以下的有動態內容後發起的面板，只要不被AJAX或回電（在這種情況下產生的動態內容發起的JPanel方法在阿賈克斯成功或回調方法）。這裏選擇是類或您使用的面板ID我不喜歡用延遲和排隊，因爲目的是entireley不同

$('#detailTable').empty(); 
$('<div>') 
.html('')  
.appendTo('#detailTable').find('selector').jPanel({ 
     'effect' : 'fade', 
     'speed'  : 'slow', 
     'easing' : 'swing' 
    });

我會盡力實施，在未來的JPanel釋放這些場景的默認處理程序。

來源

2012-03-20 05:39:09 Deepu

live（）方法的使用在最新的jQuery版本中已棄用。 – Deepu

如何在jquery中動態創建JPanel？

回答

相關問題