如何在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？

回答

相关问题