Module, guidance on TabList/Tab ContentType

Topics: Customizing Orchard, Writing modules
Dec 21, 2011 at 2:29 PM

So I have a ContentType I want to call "tab" and have the user maintain a list of "tab" content types in a "TabList".  Each Tab it will have a title and a body and the title and body can either be HTML text (HtmlField) or an Image (ImageField).  

The tricky part is that the admin section for the tab content type would allow the user to select if they want Text or Image and the proper fields would show or hide appropriately (hiding divs are fine, I don't need ajax).

Then the TabList would contain a collection of Tab content types with it's own settings width/height of the tab and body area, vertical or horizontal tabs etc.

The ultimate goal is to create a list of this content type that another person on the team can attach to and display a tabbed set based on the data (and make it beautiful of course.

Any advice on how to start here?  

First my content type will reference other content parts from other modules (ImageField and HTMLField), how do I do that (in code)?  

Dec 27, 2011 at 10:23 PM

Maybe use jQuery UI's tabs functionality? Have your content type "Tab" store the html for the tab body, and the tab names, and the part that renders the tabs for display just outputs all the stuff into a <ul> structure that jQuery UI tabs will render into an interactive tab structure. You'll also have to render some javascript to initialize the jquery tab UI element. 

 

Sorry if this is obvious to you; not sure at what point in the process you are looking for help in. 

Dec 28, 2011 at 12:55 AM
TheMonarch wrote:

Maybe use jQuery UI's tabs functionality? Have your content type "Tab" store the html for the tab body, and the tab names, and the part that renders the tabs for display just outputs all the stuff into a <ul> structure that jQuery UI tabs will render into an interactive tab structure. You'll also have to render some javascript to initialize the jquery tab UI element. 

Sorry if this is obvious to you; not sure at what point in the process you are looking for help in. 

Glad you brought it up.  You are thinking exactly like I am for the "UI side",  the .cshtml would likely create a dev with UI elements that jquery tabs can translate.  

My bigger question (though not well articulated) was more on the admin side about how I accomplish this using another module content part (image content type specifically) within my custom content part.  I'd like to use the html content part along with the image content part and be able to customize the look and feel of the administration of this content item.