Download & Extend

Include <span> tags into quicktabs link

Project:Quick Tabs
Version:6.x-2.0-rc3
Component:Code
Category:support request
Priority:normal
Assigned:Unassigned
Status:closed (fixed)

Issue Summary

Hello,

I have to wrap the $tab['title'] within some tags. I guess I have to overwrite theme_quicktabs_tabs?
Here is what I did...

<?php
function phptemplate_quicktabs_tabs($quicktabs, $active_tab = 'none') {
 
$output = '';
 
$tabs_count = count($quicktabs['tabs']);
  if (
$tabs_count <= 0) {
    return
$output;
  }

 
$index = 1;
 
$output .= '<ul class="quicktabs_tabs quicktabs-style-'. drupal_strtolower($quicktabs['style']) .'">';
  foreach (
$quicktabs['tabs'] as $i => $tab) {
   
$class = 'qtab-'. $i;
   
// Add first, last and active classes to the list of tabs to help out themers.
   
$class .= ($i == $active_tab ? ' active' : '');
   
$class .= ($index == 1 ? ' first' : '');
   
$class .= ($index == $tabs_count ? ' last': '');
   
$attributes_li = drupal_attributes(array('class' => $class));
   
$options = _quicktabs_construct_link_options($quicktabs, $i);
   
$output .= '<li'. $attributes_li .'><a href="'. /* ??? */ .'"><span class="tab-left"></span><span class="tab">'. $tab['title'] .'</span><span class="tab-right"></span></a></li>';
   
$index++;
  }
 
$output .= '</ul>';
  return
$output;
}
?>

I don't know what to use as link and how to implement $options... the links are empty at the moment but nevertheless they work fine. Strange! :)))

Help is much appreciated.

Kind regards,
Stefan

Comments

#1

Hallo,

I found this snippet (from Theme templates):

<?php
function phptemplate_quicktabs_tabs($quicktabs, $active_tab = 'none') {
 
$output = '';
 
$tabs_count = count($quicktabs['tabs']);
  if (
$tabs_count <= 0) {
    return
$output;
  }

 
$index = 1;
 
$output .= '<ul class="quicktabs_tabs quicktabs-style-'. drupal_strtolower($quicktabs['style']) .'">';
  foreach (
$quicktabs['tabs'] as $i => $tab) {
   
$class = 'qtab-'. $i;
   
// Add first, last and active classes to the list of tabs to help out themers.
   
$class .= ($i == $active_tab ? ' active' : '');
   
$class .= ($index == 1 ? ' first' : '');
   
$class .= ($index == $tabs_count ? ' last': '');
   
$attributes_li = drupal_attributes(array('class' => $class));
   
$attributes_a = _quicktabs_construct_tab_attributes($quicktabs, $i);

   
$output .= '<li'. $attributes_li .'><span class="tab-left"></span><span class="tab"><a'. $attributes_a .'>'. $tab['title'] .'</span><span class="tab-right"></span></a></li>';
   
$index++;
  }
 
$output .= '</ul>';
  return
$output;
}
?>

It would work exactly the way I need it. The only problem is that _quicktabs_construct_tab_attributes($quicktabs, $i) seems not to be declared. I get a WSOD with the following error message:
Fatal error: Call to undefined function _quicktabs_construct_tab_attributes() in D:\DEVELOPMENT\xampp\www\mysite\sites\all\themes\mytheme\template.php on line 397

I see that this function was in earlier versions of QuickTabs but was dropped and is part of _quicktabs_construct_link_options(?).
Please can somebody help me with $attributes_a ?

If this is not possible this is my second possibility:

<?php
function phptemplate_quicktabs_tabs($quicktabs, $active_tab = 'none') {
 
$output = '';
 
$tabs_count = count($quicktabs['tabs']);
  if (
$tabs_count <= 0) {
    return
$output;
  }

 
$index = 1;
 
$output .= '<ul class="quicktabs_tabs quicktabs-style-'. drupal_strtolower($quicktabs['style']) .'">';
  foreach (
$quicktabs['tabs'] as $i => $tab) {
   
$class = 'qtab-'. $i;
   
// Add first, last and active classes to the list of tabs to help out themers.
   
$class .= ($i == $active_tab ? ' active' : '');
   
$class .= ($index == 1 ? ' first' : '');
   
$class .= ($index == $tabs_count ? ' last': '');
   
$attributes_li = drupal_attributes(array('class' => $class));
   
$options = _quicktabs_construct_link_options($quicktabs, $i);
//  $options .= array('html' => TRUE);
   
$output .= '<li'. $attributes_li .'>'. l('<span class="tab-left"></span><span class="tab">' .$tab['title'] .'</span><span class="tab-right"></span>', $_GET['q'], $options) .'</li>';
   
$index++;
  }
 
$output .= '</ul>';
  return
$output;
}
?>

The problem here is that it prints the <span> tags as plain text. If I try to extend the $options variable (with the commented line) to call it as html element I receive a WSOD with Fatal error: Unsupported operand types in D:\DEVELOPMENT\xampp\www\mysite\includes\common.inc on line 1582.

Please can somebody help me with the markup of one of this two snippets.

Help is much appreciated. Thank you very much.

Stefan

#2

replace

<?php
    $options
= _quicktabs_construct_link_options($quicktabs, $i);
   
$output .= '<li'. $attributes_li .'>'. l($tab['title'], $_GET['q'], $options) .'</li>';
?>

with

<?php
    $options
= _quicktabs_construct_link_options($quicktabs, $i);
   
$options['html'] = TRUE;
   
$title = '<span class="tab-left"></span><span class="tab">' . $tab['title'] .'</span><span class="tab-right"></span>';
   
$output .= '<li'. $attributes_li .'>'. l($title, $_GET['q'], $options) .'</li>';
?>

#3

Status:active» fixed

Awesome, it works. Thank you very much, Pasqualle.

You rock! :)

#4

Status:fixed» closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

#5

Still accurate?

Cleaner way to get some extra HTML into tabs? ie. wrapping <a> links in <span> tags?

#6

@doublejosh,

To get the <span> tags to wrap around the <a> you can change the following line from this:

$output .= '<li'. $attributes_li .'>'. l($tab['title'], $_GET['q'], $options) .'</li>';
to this:
$output .= '<li'. $attributes_li .'>'. '<span>' . l($tab['title'], $_GET['q'], $options) . '</span>'  .'</li>';

Otherwise, to just get <span> tags to wrap around the text inside the <a></a>, use the following:

$options['html'] = TRUE;
$output .= '<li'. $attributes_li .'>'. l('<span>' . $tab['title']. '</span>', $_GET['q'], $options) .'</li>';

This is just a simplified version of solution #2.

Full function to copy and paste in template.php of simplified #2:

<?php
/**
* Theme function for output of the tabs. Use this to ADD extra classes.
* The general structure 'ul.quicktabs_tabs li a' needs to be maintained
* for the jQuery to work.
*
* @ingroup themeable
*/
function mythemename_quicktabs_tabs($quicktabs, $active_tab = 'none') {
 
$output = '';
 
$tabs_count = count($quicktabs['tabs']);
  if (
$tabs_count <= 0) {
    return
$output;
  }

 
$index = 1;
 
$output .= '<ul class="quicktabs_tabs quicktabs-style-'. drupal_strtolower($quicktabs['style']) .'">';
  foreach (
$quicktabs['tabs'] as $tabkey => $tab) {
    if(!empty(
$tab)) {
     
$class = 'qtab-'. $tabkey;
     
// Add first, last and active classes to the list of tabs to help out themers.
     
$class .= ($tabkey == $active_tab ? ' active' : '');
     
$class .= ($index == 1 ? ' first' : '');
     
$class .= ($index == $tabs_count ? ' last': '');
     
$attributes_li = drupal_attributes(array('class' => $class));
     
$options = _quicktabs_construct_link_options($quicktabs, $tabkey);
     
// Support for translatable tab titles with i18nstrings.module.
     
if (module_exists('i18nstrings')) {
       
$tab['title'] = tt("quicktabs:tab:{$quicktabs['machine_name']}--$tabkey:title", $tab['title']);
      }
     
$options['html'] = TRUE;
     
$output .= '<li'. $attributes_li .'>'. l('<span>' . $tab['title']. '</span>', $_GET['q'], $options) .'</li>';
     
$index++;
    }
  }
 
$output .= '</ul>';
  return
$output;
}
?>

#7

Just a quick note about the above:

I looked into the $quicktabs array and found that $quicktabs['machine_name'] didn't exist, but all of the module code references $quicktabs['qtid']. (This is on the latest stable 2.0, rather than any previous release candidate.)

So in the above code, you'd replace...

tab['title'] = tt("quicktabs:tab:{$quicktabs['machine_name']}--$tabkey:title", $tab['title']);

With...

$tab['title'] = tt("quicktabs:tab:{$quicktabs['qtid']}--$tabkey:title", $tab['title']);