jQuery Tabs

Mit problem er at den auto-generere en sub_menu som ligger som et <div>-tag. Derefter fremkommer elementerne også som endnu et <div>-tag.

Jeg ønsker at separere det til at blive en ul-liste som hovedmenu - derefter skal sub_menuen fremkomme som endnu en ul-liste inde i de tilhørende li'er som en dropdown.

Derefter ønsker jeg at content-delen kommer seperat ned i en #content div.

Det nuværende resultat viser dette:

UL & LI .main-navigation
--------> DIV .sub_tabs
--------------> DIV .content


Alle elementerne ligger inde i hinanden. Jeg ønsker at splitte dem op, men stadigvæk bruge samme funktionalitet den har på nuværende tidspunkt - altså at den loader elementerne ud fra et AJAX kald.

Den nuværende kode til scriptet:

 $(".main-navigation").tabs({
     active:activeMainTabIndex,
     select: function(event, ui){
                     $(ui.panel).empty();
             },
     load: function(event, ui){
             // Check if specific subpage should be set active
             if(param != "" && param != undefined){
                activesubTabIndex = $('#'+page+'-'+param).index();
             }
 
             try{
                    $(".sub_tabs").tabs({
                        active: activesubTabIndex,
                           beforeLoad: function(event, ui){
                              ui.ajaxSettings.url += window.location.search;
                                      ui.jqXHR.error(function(){
                                         //ui.panel.html('<div id="loginErrors" class="ui-widget margin-bottom-10 "><div class="ui-state-error ui-corner-all padding-20"><p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span><strong>Fejl:</strong> Der opstod en fejl under hentning af indhold. Kontakt din system administrator.</p></div></div>');
                                         //ui.panel.html('<div id="loginErrors" style="width:100%;text-align:center;"><img src="../img/loader.gif" /></div>');
                                      });
                                     ui.panel.html('<div id="loginPending" style="width:100%;text-align:center;"><img src="../img/loader.gif" /></div>');
                                      },
                                      beforeActivate: function(event, ui){
                                         ui.oldPanel.empty();
                                      }
                             });
                     }
                     catch(err){
                        alert("An error happened!" + "\n" + "Press the ok button to reload the site!");
                        location.reload();
                     }
     }
 });

Nogen forslag?

UPDATE 11/05/15 12:51: Jeg har i det store og det hele fået løst problemet. Til jer som skulle være ude i samme problem kan jeg kort forklare hvad jeg har gjort.

Jeg har med jQuery separeret html outputtet, og smidt det ind i andre html elementer.

 var file = 'ajax/' + page + '/' + param + '.php' + querystring;
     
     if(page !== "") {
         $("#content").load(file);
     }
     
     $("#main_tabs").tabs({});
     
     var copy = $('#main_tabs').clone(true).attr('id', 'placeholder');
     copy.find('div.ui-tabs-panel').remove();
     $('#placeholder').replaceWith(copy);
 
     $('#main_tabs').remove();
     
     $('#placeholder .sub_tabs li a').click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $("#content").load(href);
     });

page, param og querystring fremkommer af et array som splitter url adressen op.

HTML'en er stort set det samme, jeg har bare oprettet <div id="placeholder"> til at indeholde outputtet.

bare skjul / vis elementerne ?

Genial løsning !!!

Just in case at ingen bliver forvirret over koden. Man kan let og elegant fjerne linjen $("#main_tabs").tabs({}); da man ikke bruger tabs mere . Virkede for mig.