Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Creating an editable jQuery Tabbed Panel


Reply


7 Posts   2490 Views

Avatar
Blackthorn87

Community Member, 27 Posts

23 November 2011 at 6:15am

Hey Guys,

I've been looking on the net and trying to figure out how to build a jQuery Tabbed Panel all day today with no success (like this one: http://jqueryui.com/demos/tabs/). What I need it to be able to create, is a tabbed panel as a widget type object that can easily be configured and then used on everypage in the website (the same one configuration).

What is wanted to know is either:

1. Does anybody have a module/widget that will do this?

OR

2. How can I create it myself.

I'm very competent with html and css and have someone that can help with the javascript, what I'm really struggling with is getting SilverStripe to do this so that my client can edit the contents of the panes and also add or remove panes as they wish.

Any help in converting jquery (things) into SilverStripe what be helpful, or any pointers to any tutorials would be helpful. But more helpful would be answers to the points above.

If you guys need more information let me know.

Thanks to anyone that can help,

Arun.

Avatar
Willr

Forum Moderator, 5513 Posts

9 December 2011 at 12:33pm

What are you struggling with? You can write Javascript just as you would in plain jane HTML as you would in SilverStripe.

See http://doc.silverstripe.org/sapphire/en/topics/javascript for information on how to include the files but if you want it on every page you should edit the main Page.ss template

<% require(link/to/yourjs.js) %>

I suggest you don't make it a widget, and make it an'Include' template.

Avatar
prawnstar

Community Member, 120 Posts

9 December 2011 at 1:42pm

Hi, Arun,

Creating a tabbed box with jQuery/SilverStripe is really pretty easy. And I agree with Will to not make it a widget.

What I usually do is create a parent page with a few child pages. In my parent page template I iterate over the child pages with a control loop to produce the tabbed box. Typically the title of the child page is the text I use for the tabs and the content of the child pages are the content for each box. The jQuery tabbed box goes in the parent page template. As the control loop loops over each child page it builds the tabbed box.

Make sense?

Chris

Avatar
Blackthorn87

Community Member, 27 Posts

14 January 2012 at 7:12am

Thank you guys.

I know it's been a while, but I managed to get this working by using an include template, but the idea about looping through child pages, seems like the best way to do it.

Thanks again.

Avatar
goodness

Community Member, 38 Posts

11 May 2013 at 1:28am

I really like the idea of making tab'd contact that is user-editable within the CMS. I'd like to implement this in several FAQ sections.
Could someone please supply some detail (code and directions) on how to create and implement this?

Thanks in advance to the kind person(s) willing to help!

Avatar
goodness

Community Member, 38 Posts

14 May 2013 at 12:54am

Edited: 14/05/2013 7:44am

Isn't there anyone that could offer up directions and code to make this happen?

I know this was covered in the past (looks like 2011) but I'm new to SS and hoping someone can show me how to get this working.

Thanks again.

Avatar
goodness

Community Member, 38 Posts

22 May 2013 at 7:11am

I'm surprised that it has been 10 days since my original request for help with this. For the most part I have been really impressed with the willingness of the members of this forum to help out.

Anyone?