How to open a tab with jquery-ui

Question

I´m trying to open a tab using jquery, here is my code:

$("#ecContenedorFolders").tabs({
     tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon-close'></span></li>"                                                     
});
$("#ecContenedorFolders").tabs("add","#ecApp05","Friends Discussions");

As everyone can see i´m using a template, so when i use the 1st 3 lines i get my new tab, but i can switch between prevoius tabs, if i only use the last line i get my new tab, i can switch between tabs, but i can add content. ¿Does anyone knows a way to improuve this code?

Thanks in advance.

I can't understand your question. Do you need the code for change the acrive tab? — Imaky, Jun 18 '12 at 20:25
Have you read tab documentation on jQueryUI site? http://jqueryui.com/demos/tabs/#ajax — Dimitri, Jun 18 '12 at 20:49
You will need to accept the answer. This way the question/answer show up as resolved in search results and such. Please check this link if you need help on how to accept an answer: stackoverflow.com/faq#howtoask — Imaky, Jul 11 '12 at 17:25

score 1 · Accepted Answer · answered Jun 18 '12 at 20:45

1

What you need is to include panelTemplate along with your tabTemplate. Something like this:

$("#ecContenedorFolders").tabs({
  tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon-close'></span></li>",
  panelTemplate: "<p>Panel Text here</p>"
});

$("#ecContenedorFolders").tabs("add", "#ecApp05", "Friends Discussions");

Hope this helps!

answered Jun 18 '12 at 20:45

ganeshk

5,583
3
27
31

Thanks, 1 more question, if i want to load in panelTemplate an url, lets say google where do i put the url?? – linker85 Jun 18 '12 at 20:56
panelTemplate takes in any HTML you want. So to include a url, you could include in there - something like: `panelTemplate: "
Panel text here
` – ganeshk Jun 18 '12 at 22:00
1

So, does this answer your question? If so, would you mind accepting this as your answer? – ganeshk Jun 19 '12 at 13:14
1

You will need to accept the answer. This way the question/answer show up as resolved in search results and such. Please check this link if you need help on how to accept an answer: http://stackoverflow.com/faq#howtoask – ganeshk Jun 19 '12 at 14:36

How to open a tab with jquery-ui

1 Answers1