展开/折叠特定的jpanel

时间:2011-11-29 06:28:18

标签: jquery jquery-plugins jpanel

如何根据Titlesome id扩展或合并特定JPanels

到目前为止,我可以使用按钮切换展开/折叠JPanel。

//Assigning a click event on button to trigger expand/collapse JPanel
$('#triggerPanelBtn').click(function(){
    //alert($('.class').children('h3').attr("id"));
    $('.class').children('h3').trigger('click');
});

var panels="";  //Creating JPanels on the fly

var trs='<tr width="100%">'+
    '<th class="thPanel" align="left" width="40%">Database Type</th>'+
    '<td align="left" width="60%" style="word-break:break-all;">Something</td>'+
'</tr>'+
'<tr width="100%">'+
    '<th class="thPanel" align="left" width="40%">Database Version</th>'+
    '<td align="left" width="60%" style="word-break:break-all;">Something</td>'+
'</tr>';

panels+='<div title="Database Version" class="class">'+
    '<div class="jqUIDiv">'+
        '<table class="jpanelTable">'+
            '<tbody>'+trs+'</tbody>'+
        '</table>'+
    '</div>'+
'</div>';

panels+='<div title="ORS Databases" class="class" id="OrsDatabases">'+
    '<div class="jqUIDiv">'+
        '<table class="jpanelTable">'+
            '<tbody>'+trs+'</tbody>'+
        '</table>'+
    '</div>'+
'</div>';

panels+='<div title="Master Database" class="class">'+
    '<div class="jqUIDiv">'+
        '<table class="jpanelTable">'+
            '<tbody>'+trs+'</tbody>'+
        '</table>'+
    '</div>'+
'</div>';

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

2 个答案:

答案 0 :(得分:1)

您可以使用具有默认打开功能的最新jPanel 1.4版,并指定要打开的面板,如下所示

$('#wrapperId').jPanel({
    "defaultOpen"   :  true
            // other settings
});

或者如果您使用类选择器初始化了面板,并且想要使用按钮上的集合中的标题单独打开某些面板,请单击您的操作,如上所述。

答案 1 :(得分:0)

最后我想出了一些帮助我的东西

$('#triggerPanelBtn').click(function(){
    $('.class').each(function() {  
            if($(this).attr("title")==="ORS Databases")  //I want to Expand/Collapse the JPanel having "ORS Databases" as it's Title
            $(this).children('h3').trigger('click');
    });
});