In the mojoPortal 2.2.7.3 release announcement, I mentioned that we changed from ExtJs tabs to YUI tabs in mojoPortal. One side benefit of this is that its now possible to create tabs in your content using the editor.

In the past this wasn't possible. I had written a .NET wrapper control around the ExtJs tabs, but only developers could use that, there was no simple way to create tabs right in your content. The integration with YUI tabs is a little looser, I have not implemented a .NET control for it yet though I may do so in the future. But the main scripts for YUI tabs are included by default, so you can paste a simple chunk of markup into the source view of the editor to get the start of your tabs, and then you can edit it from there to add more tabs or change the labels and contents of the tab.

Now you won't see the tabs in the editor, but when you save it you will see the tabs.

To try it out, add an Html Content instance to a page in your mojoPortal site or on our demo site. Click the edit link to edit the content, then click the source button to see the raw markup view. Now paste in this:

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>
<div class="yui-skin-sam">
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
</div>

Save, and you will see something like this:

At some point when I implement content templates I will make it easy to do this by selecting a content template, but thought I would mention it for the more html savvy users.