Design and CSS styles
Version 5.x > Design and CSS styles > How to implement Tabbed content entry View modes: 
User avatar
Member
Member
Redactuk - 12/5/2010 6:54:02 PM
   
How to implement Tabbed content entry
My client would like their main content pages divided into in-page tabbed area. so each page much have introductoary paragrapha nd some images, the bottom 2/3 page will contained tabbed content areas covering various aspects of the service they provide. Now I have no problem building tabbed content using CSS and combinations of JQuery or AJAX, but what wondering is how best to allow the user to actually ENTER this content in the CMS? I don't really want them to enter raw HTML into content areas, and it seems a bit messy having say 5 text area controls on each template - one for each tab. Also with this last method what happens if all pages using the template have different number of tabbed content area?

Can anyone that has implemented tabbed content areas give me any pointers as to how to enable the CMS Editor to actually enter the content?

Note: I'm NOT talking about tabbed menu control or tabbed pages, but content on ONE page divided into tabbled areas.

Many thanks

User avatar
Member
Member
DesignByOnyx - 12/6/2010 6:44:20 PM
   
RE:How to implement Tabbed content entry
Hey, I started building a series of jQuery Form Controls to allow for just this. These are Kentico Form Controls that rely on jQuery for dynamic creation of inputs. For example, I had a client who had 70+ interviews they wanted to add to their site. I could not trust them to style every single question and answer appropriately, so I built a form control that allowed them to dynamically "Add/Delete Question", "Add/Delete Answer". The final HTML was stored in a single field called "interview"... and jQuery did all of the parsing and form creation. It worked quite nice, but is still not quite ready for distribution. If you are interested, I can send you what I have.

My intention was to build a framework on which any form control could be built. For example, I have already created the "interview" control mentioned above. My goal was to build have a framework where you would define a new type of document (in this case, a tabbed html control) where you basically define 1) the input form and 2) a parsing function (all in javascript)... and blamo... you have a dynamic input form.

Maybe if I can finish it in time for v.6, they might include it in the next release ;)

User avatar
Member
Member
Redactuk - 12/7/2010 7:13:10 AM
   
RE:How to implement Tabbed content entry
That sounds fantastic!

So presumably I could use this to allow the user to enter the content for multiple tabs on a single page (number of tabs up to them to decide), substituing the question for the tab name and the answer for the tab content. Then all the entered tabbed content blocks are saved to one html field (presumably with embedded html) that can then be rendered on the web page into a tabbed content area with CSS and jQuery?

If you would be willing to share with me what you have for me to adapt that would be great (my email is info at infomail.me.uk). This is also something I definately think should make it into default Kentico release, as tabbled content is most useful way to add content to a page, especially as for SEO as well as user readability it means avoiding either separating related content onto many pages or having really long pages with multiple page downs required.


User avatar
Member
Member
DesignByOnyx - 12/7/2010 9:52:06 AM
   
RE:How to implement Tabbed content entry
That is exactly correct. There would need to be some special work done for the fckeditor. And I admit that I had this idea, started down a path, and gave up in order to meet my deadline. If I had another couple days to work on this, it would be quite slick. I will send over what I have.

User avatar
Member
Member
Chanan - 1/26/2011 10:50:27 AM
   
RE:How to implement Tabbed content entry
Hi there,

That sounds like something we are going to need to implement as well. Not so much the tabbed part, but the Add/Remove ability. Would you mind sending me your sample?

User avatar
Member
Member
DesignByOnyx - 1/26/2011 1:37:27 PM
   
RE:How to implement Tabbed content entry
I certainly don't mind... just so long as you understand that this was a job left undone... so I can't make any promises that it will suit your demands. I haven't needed it for another project yet, and until I have another project that demands this type of web control, my code will have to remain in the state that it's in.

If you don't mind sending me a PM at ryan [dot] wheale [at] gmail [dot] com and I will send you the form controls you need.

User avatar
Kentico Support
Kentico Support
kentico_zdenekc - 12/14/2010 5:23:00 PM
   
RE:How to implement Tabbed content entry
Hi,

It is quite interesting topic and nice feature suggestion for future.
Currently, we are not preparing such feature for upcoming version, so for now it's up to you how to define and edit multi-tabbed content for displaying using tabs.
In version 6, there will be CKEditor integrated, what might be important information to prepare your implementation for that change...

Anyway, good luck with your efforts, if there are any questions or issues, please try to ask :)

Regards,
Zdenek