如何往tabbedpanel 中动态添加tabs

visionsky1986 2011-06-14 06:53:20

小弟最近用到jquery实现的struts2 的控件 tabbedpanel，现在需要动态往其中添加tabs

JavaScript functions:

    $.subscribe('tabchange', function(event,data) {



        var tab = event.originalEvent.ui.index;

        $('#changepanel').html('Change to Tab <strong>'+tab+'.</strong>');

        $('#infopanel').html('');

        if(tab == 2) {

        	$('#remotetabs').tabs( 'enable' , 3 );

        }

        else if(tab == 3) {

        	$('#remotetabs').tabs( 'enable' , 4 );

        }

    });

    $.subscribe('tabcomplete', function(event,ui) {

        $('#infopanel').html('<strong>Completed request with Status '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);

    });

      

Code:

    <div id="changepanel"></div>

    <div id="infopanel"></div>

    

    <s:url id="remoteurl1" action="ajax1"/>

    <s:url id="remoteurl2" action="ajax2"/>

    <s:url id="remoteurl3" action="ajax3"/>

    <s:url id="remoteurl4" action="ajax4"/>

    <sj:tabbedpanel 

    	id="remotetabs" 

    	spinner="Please wait ..." 

    	disabledTabs="[3,4]" 

    	onCompleteTopics="tabcomplete" 

    	onChangeTopics="tabchange"

    >

      <sj:tab id="tab1" href="%{remoteurl1}" label="Tab One" />

      <sj:tab id="tab2" href="%{remoteurl2}" label="Tab Two"/>

      <sj:tab id="tab3" href="%{remoteurl3}" label="Tab Three"/>

      <sj:tab id="tab4" href="%{remoteurl4}" label="Tab Four"/>

      <sj:tab id="tab5" href="%{remoteurl1}" label="Tab Five"/>

    </sj:tabbedpanel>