Droplet idea (help needed)

[Argos]

I have an idea for a droplet that shows a jQuery tabbed field for multiple WYSIWYG sections. What I envision is this:
1. create the WB sections for all tabbed contents you need. Let's say you want to show info on 3 products. So you create 3 sections with content, that show up when you click on the tabs: Product 1, Product 2, Product 3.  
2. use a droplet like [[ShowTabs?section=10,11,12&tabs=Product 1, Product 2, Product 3]]

And then the droplet adds all markup needed (of course you need jquery and the jquery call active, and css for the tabs). Maybe even extra class and id parameters can be added to the droplet, for extra styling options.

I think maybe http://www.websitebakers.com/pages/droplets/official-library/content/show-multiple-wysiwyg.php may be a good starting point for this droplet.

For the tabs I think it's best to use some standard like http://jqueryui.com/demos/tabs/ or http://jquerytools.org/demos/tabs/index.html

To prevent the tabbed sections be visible on the page as regular sections as well, you can just set their end dates in the past. That way they don't show up, but they can still be called with a droplet.

I have tried to do this myself based on the ShowMultipleWYSIWYG droplet, but failed miserably. My coding knowledge is too minimal... But I have a feeling this won't be too difficult to do for some experienced WB coders...  

[BlackBird]

I'm sure I can help, you may contact me by PN.

[pcwacht]

Could help as well.

You both know my info

[BlackBird]

Some thoughts about this: I've converted existing HTML into Tabbed by using jQuery in the past. So there may be no need to set publishing dates in the past or something. Advantage: The tabs are only shown if jQuery / JavaScript is available, while the user sees a "normal" page if it isn't. (Same for browsers that are not able to show tabs correctly, like old IE.)

I use this technique for FormBuilder input forms, in wbProfiles, for example.

The advantage of the droplet solution is that one could choose sections from different pages for this and add custom headers (=tab text).

Maybe we should combine these methods.

[Argos]

I agree the date workaround is lousy. I'm working on a little droplet for showing infoboxes within a WYSIWYG section using droplets. I just use a block name for the infobox content sections, that is not hardcoded and used in the template. So it doesn't show up unless you call it with the droplet.

I'm going to try a little more with that droplet (adding parameters for classes for example) and if that all
works out, I maybe can try again for the tabs-doplet. I have to try a bit longer before asking for your help 

[BlackBird]

You know where to find us.

[Argos]

Allmost there... I need to output this basic code:

Code: [Select]

<div>
    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="pane">Content 1</div>
    <div class="pane">Content 2</div>
    <div class="pane">Content 3</div>
</div>
Right now I have this droplet:

Code: [Select]

<?php // this line is not part of the droplet, but just to color the code below

$tabs .= '<li><a href="#">'.$tab.'</a></li>';

global $database, $wb;
$sections=explode(",",$section);
reset($sections);
array_unshift($sections," ");
while($sectionid=next($sections)){
$get_content = $database->query("SELECT content FROM ".TABLE_PREFIX."mod_wysiwyg WHERE section_id = '$sectionid'");
while ( $fetch_content = $get_content->fetchRow()){
$contentlist .= '<div class="pane">'.$content.($fetch_content['content']).'</div>';
}
}
$wb->preprocess($content);
return '<div><ul class="tabs">'.$tabs.'</ul>'.$contentlist.'</div>';
It shows the content of the WYSIWYG sections in the rigt place, but the tabs are not there yet. Instead of:

Code: [Select]

    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>

it shows:

Code: [Select]

    <ul class="tabs">
        <li><a href="#">Tab 1,Tab2,Tab3</a></li>
    </ul>

I guess I need to use some loop like is used for the content sections, but I don't succeed in creating it... My droplet call is [[test?tab=Tab 1,Tab2,Tab3&section=47,48,49]]

Please give me a hand here 

[marmot]

Hi,

I guess I need to use some loop like is used for the content sections, but I don't succeed in creating it... My droplet call is [[test?tab=Tab 1,Tab2,Tab3&section=47,48,49]]
Please give me a hand here

you already have the loop running. Just use it in the way you did for sections: Split the tab string and build the code for class tabs in every iteration. It could look like this (untested):

Code: [Select]

<?php // this line is not part of the droplet, but just to color the code below

$atabs = explode(",",$tab);
$stabs = '';

global $database, $wb;
$sections=explode(",",$section);
reset($sections);
array_unshift($sections," ");
while($sectionid=next($sections)){
$stabs .= '<li><a href="#">'.(array_shift($atabs)).'</a></li>';
$get_content = $database->query("SELECT content FROM ".TABLE_PREFIX."mod_wysiwyg WHERE section_id = '$sectionid'");
while ( $fetch_content = $get_content->fetchRow()){
$contentlist .= '<div class="pane">'.$content.($fetch_content['content']).'</div>';
}
}
$wb->preprocess($content);
return '<div><ul class="tabs">'.$stabs.'</ul>'.$contentlist.'</div>';
regards

[Argos]

It works! Thank alot Marmot 

I'm no coder, and I managed with copy/paste and trial&error to get half of it running, but I don't really have a clue how it all works. I spent about 6 hours trying, but I didn't succeed. I'll study the code and hopefully I learn a little bit from it... 

[Argos]

Allright, the first version is public. It works great, if I may say so  

You can choose between a tabbed version, or an accordion.

You can find it here: http://www.argosmedia.net/wb/pages/droplets/tabby.php