JQuery UI tabbed content rotator

I recently had occasion to set up a tabbed content rotator. To make life easy for the client, I used resources for each tab pane’s content, with Wayfinder and Ditto to generate the HTML for the JQuery UI tabbed rotator. It was actually quite simple.

http://sottwell.com/rotating-tabs.html

I love the idea - I’ve been playing with similar things my self recently but not yet put them into modx.

Thanks for sharing your implementation.

One problem - if you view your page without javascript it looks a mess - perhaps it is just a little bit more css would do it?

Edit - I just looked at the jquery ui tabs page with javascript off and it produced a mostly usable page so it is possible Edit again!! the ui tabs page is also messed up without javascript

I suppose most people do have it turned on, however it seems that best practice to have things work without the script and it should be possible.

This was only one option; there are probably dozens of different ways of accomplishing much the same thing.

What a coincidence. I discovered that last night while browsing some ModX blogs and thought it was really really cool. Thanks for sharing.

Hey, this is great! Thanks for sharing. I will use this on a planned site.

Quote from: sottwell at Mar 18, 2011, 11:59 AM

To make life easy for the client, I used resources for each tab pane’s content, with Wayfinder and Ditto to generate the HTML for the JQuery UI tabbed rotator. It was actually quite simple.
http://sottwell.com/rotating-tabs.html

This is a great idea. I did this once with revo and used TVs. But this seems to be a nicer solution Thank you for sharing.

I’ve been playing more with JQuery over the last few weeks and it’s pretty awesome.

Nice tidy way of doing it too .

It’s been pointed out to me that the containing HTML is also important, particularly the containing <div id="rotator">...<div> element. I’ve been meaning to add another tab with the actual HTML with the snippet calls in place, but I’m in such a habit of doing a view source of any web page that interests me that it didn’t really occur to me that anybody looking at my little demo wouldn’t immediately do the same.

Actually, I’ve taken this directly from http://www.raymondselda.com/create-a-tabbed-content-rotator-using-jquery/ and his demo page http://www.raymondselda.com/demo/tabbed-rotator/ and the only reason I made up the demo was to show how Wayfinder and Ditto could be used rather than a single hard-coded page, which would not be pleasant for the average user to be editing. This way, you can use a few resources that the user can edit and have the rotator automatically use those resources for its tabs and contents.

For actual use, I would put the whole rotator div in a chunk, and use a radio button TV to offer the option of having the rotator on a page or not. Usually such a thing would only appear on the home page, so the default for the TV would be some other chunk with something more suitable for the rest of the site’s pages, or even an empty chunk. I might even use ManagerManager to hide the TV once it’s set for the home page to have the rotator. The MM rule can always be commented out if it becomes necessary to make any changes in any of the resources. Or, of course, one could use a template specifically for the home page. I find it amusing to make a single template fit the entire site using TVs and CSS.