Creating a module to group content parts into tabs using jQueryUI.Tabs pluguin.

Topics: Customizing Orchard
Sep 18, 2012 at 10:26 PM

I’m trying to create an Orchard module to group content parts for a particular content items into tabs using jQueryUI tab plugin. 

At this point I accomplished the task by creating a content part which generates empty tabs, and using javascript I load the generated html of the parts I want into each desired tab. 

I’m looking for a way to customize how content parts are generated for a particular content item, to create the proper wrapper html, so the tab plugin works. 

Could you please give me a raw advice on where to look for to achieve this?

Currently I’m rendering:

<div class="tabbedContent">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
</div>

And then, using javascript, I move the content from the parts I want to group into the proper DIV.

I’m looking for a way to generate this skeleton and render individual parts directly into their own tab div.

<div class="tabbedContent">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div id="tab1">
                I WANT PART X RENDERED HERE, ORGANIC, NOT USING JAVASCRIPT
    </div>
    <div id="tab2">
                I WANT PART Y RENDERED HERE, ORGANIC, NOT USING JAVASCRIPT
    </div>
</div>

Could you please advise where to look for?

Thanks in advance.

Developer
Oct 4, 2012 at 10:36 AM

If you are writing your own controller with an action taking a content item ID, you could use ContentManager to load the content item and get all of the attached parts via the TypeDefinition property. Now you need to be able to render each part individually without rendering the entire content item. I don't remember that is supported out of the box, but I do remmeber doing some work on that here: http://orchard.codeplex.com/SourceControl/network/forks/sfmskywalker/InlineEditingCoreSupport