Javascript Tools Tabs Implementation

I got the heads up about this AJAX module from Zack@CSL. Anyways, this was what I needed to implement this module for the site I was working on. Extended this a bit to include information on how to draw in other nodes:
http://www.openconcept.ca/fun_with_drupals_ajax_tabs

The last think you want to do is set up AJAX tabs that your site admins can't administer through their WYSIWYG tools.

Mike
--
Mike Gifford, OpenConcept Consulting
Free Software for Social Change -> http://openconcept.ca
http://learningpartnership.org http://ox.ca http://poped.org http://openoffice.ca

How would I create tabs for the fields I have in a view/block.

thnx

this does not work for me. Possibly because I'm usinf drupal 5, but i get this error:

* warning: Invalid argument supplied for foreach() in /Library/WebServer/Documents/drupal/sites/all/modules/jstools/tabs/tabs.module on line 13.
* warning: Invalid argument supplied for foreach() in /Library/WebServer/Documents/drupal/sites/all/modules/jstools/tabs/tabs.module on line 19.

In drupal 5.2

I enable the tabs module
and enable the page module, log in as a user with admin access, and create a new piece of content ('node') of type 'page'
* for 'Input format', select 'PHP code'
* put the following as the page's content:

  $tabs .= theme('tabs_tab_page', t('First tab'), t('This is the first tabbed page'));
  $tabs .= theme('tabs_tab_page', t('Second tab'), t('This is the second tabbed page'));

  $output = theme('tabs_tabset', 'example', $tabs);

  print $output;

:

and it didnt work..? please help me what to do..

I'm just about pulling out my hair right now. I simply do not have the guts to pull this off or something. Here's what I've done so far...

[1] Downloaded: Javascript Tools
[2] Uploaded To "Modules"
[3] Enabled Module "Javascript Tools"
[4] Enabled Module "Tabs" Under Javascript Tools
[?] What's the "Page" Module, I have none called this.
[5] I entered your php code above, what I got was this.

In IE it shows up as a list.
I must be an idot or something.
I just can't get this one to work.

Give me a checklist please or some
tips or something. I just want some
tabs, lol. I've been through every
tab reference I can think of on Google
and I just can't get the thing to work.

Much appreciated.

» Respectfully, GreenLED
» Stable Files . net

This sort of thing you'd do in a theme. Edit e.g. a page.tpl.php file for a PHPTemplate theme. You'd make the tabs manually rather than through a theme() call. Copy the HTML rendered for a tabset, and then for the tab page content put your block. You'd need to test for each block, incrementing an index counter only if there was content for the block.

That way the module author is more likely to find the request, and others are more likely to see it.

But, I have been doing tabs (provided by JS tools) together with tab panel + panel mini + panel. User Profiles Version 2 would be nice to be presented in tabs isn't? Michelle is planning to come out with User Profiles Version 3, is she planning to use tabs?

-najibx -
Drupal developer in Malaysia

and the panels tabs style module, http://drupal.org/project/panels_tabs

I tested nedjo's code on my drupal site (5.6), it works pretty well. Have you changed example to the name of what you are trying to tab?

$output = theme('tabs_tabset', 'example', $tabs);

can I subscribe to this thread? I'd love to know how to do this too!
Thanks!
Scott

I've been using this code with D6 to display nodes in tabs. How could I adapt this to display block instead of nodes in differents tabs?

Thank you!

You can go to this page in a test site I'm building and you'll see tabbed pages with the tabs from the jquery tabs plugin: http://forensic.ipwa.net/node/11

I used the code you posted to call nodes inside my tabs, it works well in most browsers except IE6. In IE 6 the whole page shifts when you click the second tab, any help to solve this would be greatly appreciated.

For the jquery tabs plugin style to work I had to hack the tabs module a little bit, in the tabs.module I changed the function that returns the rendered tabs in lines 118-135.

From:

/**
 * Return rendered tabset.
 *
 * @themable
 */
function theme_tabset($element) {
  $output = '<div id="tabs-'. $element['#tabset_name'] .'"'. drupal_attributes($element['#attributes']) .'>';
  $output .= '<ul class="anchors">';
  foreach (element_children($element) as $key) {
    if ($element[$key]['#type'] && $element[$key]['#type'] == 'tabpage') {
      $output .= '<li'. drupal_attributes($element[$key]['#attributes']) .'><a href="#tabs-'. $element['#tabset_name'] .'-'. $element[$key]['#index'] .'">'. $element[$key]['#title'] .'</a></li>';
    }
  }
  $output .= '</ul>';
  $output .= $element['#children'];
  $output .= '</div>';
  return $output;
}

To:

/**
 * Return rendered tabset.
 *
 * @themable
 */
function theme_tabset($element) {
  $output = '<div id="tabs-'. $element['#tabset_name'] .'"'. drupal_attributes($element['#attributes']) .'>';
  $output .= '<ul class="tabs-nav">';
  foreach (element_children($element) as $key) {
    if ($element[$key]['#type'] && $element[$key]['#type'] == 'tabpage') {
      $output .= '<li'. drupal_attributes($element[$key]['#attributes']) .'><a href="#tabs-'. $element['#tabset_name'] .'-'. $element[$key]['#index'] .'"><span>'. $element[$key]['#title'] .'</span></a></li>';
    }
  }
  $output .= '</ul>';
  $output .= $element['#children'];
  $output .= '</div>';
  return $output;
}

The changes I made was to change the anchor class to tabs-nav. The other change was to add a span inside the link on the list items, this is how the CSS applies the main background for the tabs, they use the sliding doors technique.

The next step was to download the plugin at: http://stilbuero.de/jquery/tabs/

Open the jquey.tabs.css and copy all the css and add it to your theme's css, or copy the file and call it from your template, also copy the tabs.png image to your theme folder.

I changed the tabs-nav class on the CSS:

From:

.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}

To:

.tabs-nav {
	border-bottom:1px solid #97A5B0;
	border-collapse:collapse;
	height:25px;
	line-height:normal;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:5px;
	padding:0pt 0pt 0pt 1em;
	white-space:nowrap;
	}

You may need to adjust the height.

HTH

Nicolas
-------------------------
http://nic.ipwa.net

I don't know much about that module, but I can tell you -- from my own experience the tabs created by this module are not really -- at least for me -- up to my standards -- they don't show up as I expected them too. If you're expecting them to show up just exactly like the tabs do for example when your administrating -- they don't. I would recommend using Views to create tabs. What's nice about this method is you ONLY need Views, and yes CCK. If you want a detailed way to do it, let me know and I'll post it here. Just thought I'd mention it.

I'm facing the same problem too...using Drupal 5.7 and latest jstools. Could not get it work, the page is blank

Try ...

CCK Fieldgroup Tabs - Display CCK fieldgroups in tabs. Enables splitting up content onto tabs in both editing and display.
Depends on: Fieldgroup (enabled), Tabs (enabled)

Hope this help.

-najibx -
Drupal developer in Malaysia

Have you guys checked out my comment about creating tabs with cck and views? I think it will make you quite happy to find that you can create [b]system-like[/b] tabs without having to even install javascript-tools. Check it out »

» Respectfully, GreenLED
» Stable Files . net