22976 Posts in 11667 Topics by 2826 members
|Go to End|
27 February 2010 at 2:53am
I would like to use something like the jquery accordian in the body of the web page but to be editable from within the CMS. I can use jquery if I manually code this but it would be helpful if others could enter content within the accordian list items from within the CMS.
Any ideas on how to install the jquery item into the body of the page?
27 February 2010 at 10:00am
It really depends on a few factors, the specific jQuery plug-in you're using, as well as the type of data being displayed and the sophistication of you're users.
If its non-page DataObjects you need displayed and you're users are fairly inexperienced at coding, you can always create a separate dataobject using the DataObjectManager module, Make sure each DataObject has a Title and content. That way the title can be your Accordion heading and you could create a stripping function to remove spaces from it and use that ID tags. Then in your template just render that data in appropriate container.
If its Page Data it even easier since you can just use the $URLSegment as your anchor ID and just wrap it in a normal template control like <% control ChildrenOf(x) %>
The main thing is you have to devise way to generate unique IDs for the anchors and content tags. I've done it on few FAQ pages and Press Release Pages
27 February 2010 at 11:27am
Thanks for the prompt reply zenmonkey. I need to get a list of FAQs onto the on-page area of the site so will have to read up on the <% control ChildrenOf(x) %> part. At least I know it can be done, I just need to find a tutorial or some documentation that explains it.
3 March 2010 at 3:12pm Last edited: 3 March 2010 3:16pm
You can use any plugin you want, I've used jcarousel with very good outcomes.
What I'd do:
- create a new DataObject with a Title, Description and $has_one (Image) I'll call this DO "MyImage".
- create a ModelAdmin for this DataObject. (now you can upload images and control them as a DataObject).
- In your page controller create a function to return MyImages.
$myimages = DataObject::get('MyImages');
if($myimages) return $myimages;
- now in the front-end you need to add JS files and the script.
- the script should be something like this
<% control MyImages %>
<% if First %>
<div id="mainPic" class="big">
<img id="mainPicture" src="$MyImageUrl"/>
<% end_if %>
<% end_control %>
<ul id="mycarousel" class="jcarousel-skin-tango">
<% control myImages %>
<li><img src="$MyImageUrl" width="75" height="75" alt="$MyImageTitle" id="$ID" /></li>
<% end_control %>
hope it helps
4 March 2010 at 6:18am
Thanks for the help Carlos, that is very useful. Perhaps we need a tutorial on jquery integration for newbies!
|Go to Top|