The Quick Tabs module allows you to create blocks of tabbed content. You can create a block on your site containing up to six tabs with corresponding content. Clicking on the tabs makes the corresponding content display instantly (it uses jQuery). The content for each tabbed section can be either a view or an existing block. It is an ideal way to do something like the Most Popular / Most Emailed stories tabs you see on many news websites.

Once created, the Quick Tabs blocks show up in your block listing, ready to be configured and enabled like other blocks.

Multiple Quick Tabs blocks can be placed on a single page.

Visit the Quick Tabs configuration page to choose a style for your Quick Tabs blocks.

Click on the "New QT block" tab below to get started.

', array('@configuration' => url('admin/settings/quicktabs'))); case 'admin/build/quicktabs/add': return '

'. t('Here you can create a new Quick Tabs block. Once you have created this block you will be taken to the blocks page to configure and enable it.', array('@overview' => url('admin/build/block'))) .'

'; } } /** * Implementation of hook_menu(). */ function quicktabs_menu($may_cache) { $items = array(); if ($may_cache) { $items[] = array( 'path' => 'admin/build/quicktabs', 'title' => t('Quick Tabs'), 'description' => t('Create blocks of tabbed content - content for each tab can be a view or a block'), 'callback' => 'quicktabs_list', 'access' => user_access('administer quicktabs blocks'), ); $items[] = array('path' => 'admin/build/quicktabs/list', 'title' => t('List'), 'type' => MENU_DEFAULT_LOCAL_TASK, 'weight' => -10); $items[] = array( 'path' => 'admin/build/quicktabs/add', 'title' => t('New QT block'), 'access' => user_access('create quicktabs block'), 'callback' => 'quicktabs_new', 'type' => MENU_LOCAL_TASK); $items[] = array('path' => 'admin/build/quicktabs/delete', 'title' => t('Delete QT block'), 'access' => user_access('administer blocks'), 'callback' => 'drupal_get_form', 'callback arguments' => array('quicktabs_block_delete'), 'type' => MENU_CALLBACK); $items[] = array('path' => 'admin/build/quicktabs/edit', 'title' => t('Edit QT block'), 'access' => user_access('administer blocks'), 'callback' => 'quicktabs_block_edit', 'type' => MENU_CALLBACK); $items[] = array( 'path' => 'admin/settings/quicktabs', 'title' => t('Quick Tabs'), 'description' => t('Select a style for your Quick Tabs blocks'), 'callback' => 'drupal_get_form', 'callback arguments' => array('quicktabs_settings'), 'type' => MENU_NORMAL_ITEM, 'access' => user_access('administer site configuration'), ); $items[] = array( 'path' => 'quicktabs/preview', 'callback' => 'quicktabs_preview_page', 'type' => MENU_CALLBACK, 'access' => user_access('administer site configuration'), ); } else { quicktabs_set_js(); } return $items; } /** * Implementation of hook_perm(). */ function quicktabs_perm() { return array('create quicktabs block', 'administer quicktabs blocks'); } function quicktabs_list() { $result = db_query('SELECT * FROM {quicktabs}'); $header = array(t('Quick Tabs Block Name'), t('Delete')); $rows = array(); while ($row = db_fetch_object($result)) { $tablerow = array( array('data' => $row->title .' ('. l('edit', 'admin/build/quicktabs/edit/'. $row->qtid) .')'), array('data' => l(t('Delete'), 'admin/build/quicktabs/delete/'. $row->qtid)), ); $rows[] = $tablerow; } $output = theme('table', $header, $rows, array('id' => 'quicktabs')); return $output; } function quicktabs_new() { drupal_add_js(drupal_get_path('module', 'quicktabs') .'/js/quicktabs_form.js'); drupal_add_css(drupal_get_path('module', 'quicktabs') .'/quicktabs.css'); return drupal_get_form('quicktabs_form'); } function quicktabs_get_views() { views_load_cache(); $result = db_query("SELECT v.name, v.description, f.field FROM {view_view} v LEFT JOIN {view_exposed_filter} f ON v.vid=f.vid"); $views = array(); while ($view = db_fetch_object($result)) { if (!($view->field)) { $views[$view->name] = $view->name .': '. $view->description; } } $default_views = _views_get_default_views(); $views_status = variable_get('views_defaults', array()); foreach ($default_views as $view) { if (!$views[$view->name] && ($views_status[$view->name] == 'enabled' || (!$views_status[$view->name] && !$view->disabled)) && empty($view->exposed_filter)) { $views[$view->name] = check_plain($view->name .': '. $view->description); } } return $views; } function quicktabs_get_blocks() { $blocks = _block_rehash(); $blocksarray = array(); foreach ($blocks as $i => $block) { if ($block['module'] != 'quicktabs') { $key = $block['module'] .'_delta_'. $block['delta']; $blocksarray[$key] = $block['info']; } } return $blocksarray; } function quicktabs_form($form_values = NULL) { if(stristr($_POST['op'], 'remove_')) { $tab_to_remove = intval(substr($_POST['op'], 7)); } $changed = FALSE; $form = array( '#cache' => TRUE, ); $form['title'] = array( '#title' => t('Block Title'), '#type' => 'textfield', '#description' => t('The title of the whole block'), '#default_value' => isset($form_values['title']) ? $form_values['title'] : '', '#weight' => -5 ); $formtype = $form_values['formtype'] ? $form_values['formtype'] : 'new'; $form['formtype'] = array( '#type' => 'hidden', '#value' => $formtype ); if ($formtype == 'edit') { $form['qtid'] = array( '#type' => 'hidden', '#value' => $form_values['qtid'] ); } if (isset($form_values)) { $tabcontent = $form_values['tabs']; if(isset($tab_to_remove) && ($tab_to_remove <= count($tabcontent))) { unset($tabcontent[$tab_to_remove]); $tabcontent = array_values($tabcontent); unset($_POST); unset($tab_to_remove); $changed = TRUE; } } if (isset($_POST['num_tabs'])) { if ($_POST['op'] == 'More tabs' && isset($_POST['new_tabs'])) { $qt_count = $_POST['num_tabs'] + $_POST['new_tabs']; unset($_POST['new_tabs']); } elseif (isset($tab_to_remove)) { $qt_count = $_POST['num_tabs'] - 1; } else { $qt_count = $_POST['num_tabs']; } } else { $qt_count = max(2, empty($tabcontent) ? 2 : count($tabcontent)); } $form['num_tabs'] = array( '#type' => 'hidden', '#value' => $qt_count, ); // Add a wrapper for the tabs and Add More Tabs button. $form['qt_wrapper'] = array( '#tree' => FALSE, '#weight' => -4, '#prefix' => '
', '#suffix' => '
', ); $form['qt_wrapper']['tabs'] = array( '#prefix' => '
', '#suffix' => '
', '#theme' => 'qt_tabs', ); //dprint_r($tabcontent); //die(); // Add the current tabs to the form. for ($delta = 0; $delta < $qt_count; $delta++) { $weight = isset($tabcontent[$delta]['weight']) ? $tabcontent[$delta]['weight'] : $delta-10; $title = isset($tabcontent[$delta]['title']) ? $tabcontent[$delta]['title'] : ''; $type = isset($tabcontent[$delta]['type']) ? $tabcontent[$delta]['type'] : 'block'; $bid = isset($tabcontent[$delta]['bvid']) ? $tabcontent[$delta]['bvid'] : NULL; $vid = isset($tabcontent[$delta]['bvid']) ? $tabcontent[$delta]['bvid'] : NULL; $args = isset($tabcontent[$delta]['args']) ? $tabcontent[$delta]['args'] : NULL; $limit = isset($tabcontent[$delta]['limit']) ? $tabcontent[$delta]['limit'] : NULL; $build = isset($tabcontent[$delta]['build']) ? $tabcontent[$delta]['build'] : variable_get('quicktabs_viewbuild', 'embed'); $form['qt_wrapper']['tabs'][$delta] = _quicktabs_form($delta, $weight, $title, $type, $bid, $vid, $args, $limit, $build, $changed); } $form['qt_wrapper']['new_tabs'] = array( '#type' => 'select', '#title' => 'Create more tabs', '#options' => array( '0' => 0, '1' => 1, '2' => 2, '3' => 3, '4' => 4, '5' => 5, '6' => 6, '7' => 7, '8' => 8, '9' => 9, '10' => 10 ), '#default_value' => 0 ); $form['qt_wrapper']['tabs_more'] = array( '#type' => 'button', '#value' => t( 'More tabs' ), '#description' => t("Click here to add more tabs."), '#id' => 'tabs_add_more_button', '#weight' => 1, ); if ($changed) { $form['please_save'] = array( '#value' => '
Changes will not be saved until you click submit. You can only remove one pre-existing tab from a QT block before re-saving.
' ); } $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), ); return $form; } function _quicktabs_form($delta, $weight = -10, $title = '', $type='block', $bid = 0, $vid = 0, $args = NULL, $limit = NULL, $build = 'embed', $changed = FALSE) { $form = array( '#tree' => TRUE, ); if (module_exists('views')) { $views = quicktabs_get_views(); } else { $views = NULL; } $blocks = quicktabs_get_blocks(); $form['tabweight'] = array( '#type' => 'weight', '#default_value' => $weight, '#parents' => array('tabs', $delta, 'tabweight'), ); $form['tabtext'] = array( '#type' => 'textfield', '#size' => '10', '#title' => t('Tab @n', array('@n' => ($delta + 1))), '#default_value' => $title, '#parents' => array('tabs', $delta, 'tabtext'), ); if (module_exists('views')) { $form['type_options'] = array( '#type' => 'value', '#value' => array( 'block' => 'block', 'view' => 'view', ) ); $form['tabtype'] = array( '#type' => 'radios', '#options' => $form['type_options']['#value'], '#title' => t('Tab Content'), '#default_value' => $type, '#parents' => array('tabs', $delta, 'tabtype'), ); $form['vid'] = array( '#type' => 'select', '#options' => $views, '#default_value' => $vid, '#title' => t('Select a view'), '#parents' => array('tabs', $delta, 'vid'), ); $form['args'] = array( '#type' => 'textfield', '#title' => 'arguments', '#size' => '10', '#required' => false, '#default_value' => $args, '#description' => t('Provide a comma separated list of arguments to pass to the view.'), '#parents' => array('tabs', $delta, 'args') ); $form['limit'] = array( '#type' => 'textfield', '#size' => '5', '#title' => t('Limit'), '#default_value' => $limit, '#description' => t('Limit the number of results'), '#parents' => array('tabs', $delta, 'limit') ); $form['build'] = array( '#type' => 'select', '#title' => 'build type', '#options' => array('embed' => 'embed', 'block' => 'block', 'page' => 'page'), '#default_value' => $build, '#description' => t('Choose how to build this view. If unsure, leave as "embed".'), '#parents' => array('tabs', $delta, 'build') ); } else { $form['tabtype'] = array( '#type' => 'hidden', '#title' => t('Type for tab @n', array('@n' => ($delta + 1))), '#value' => $type, '#parents' => array('tabs', $delta, 'tabtype'), ); } $form['bid'] = array( '#type' => 'select', '#options' => $blocks, '#default_value' => $bid, '#title' => t('Select a block'), '#parents' => array('tabs', $delta, 'bid'), ); $form['remove'] = array( '#type' => 'submit', '#value' => 'remove_'. $delta, '#attributes' => array('class' => $changed ? 'delete-tab-disabled' : 'delete-tab'), '#parents' => array('tabs', $delta, 'remove'), ); return $form; } function theme_qt_tabs($form) { $rows = array(); $headers = array( t('Tab Title'), t('Weight'), module_exists('views') ? t('Tab type') : '', t('Content'), t('Remove') ); foreach (element_children($form) as $key) { // No need to print the field title every time. unset($form[$key]['tabtext']['#title'], $form[$key]['tabtype']['#title'], $form[$key]['bvid']['#title']); // Build the table row. $row = array( 'data' => array( array('data' => drupal_render($form[$key]['tabtext']), 'class' => 'qt-tab-title'), array('data' => drupal_render($form[$key]['tabweight']), 'class' => 'qt-tab-weight'), module_exists('views') ? array('data' => drupal_render($form[$key]['tabtype']), 'class' => 'qt-tab-type') : array('data' => '', 'class' => 'qt-tabtype-hidden'), array('data' => drupal_render($form[$key]['bid']) . drupal_render($form[$key]['vid']) . drupal_render($form[$key]['args']) . drupal_render($form[$key]['limit']) . drupal_render($form[$key]['build']), 'class' => 'qt-tab-bvid'), array('data' => drupal_render($form[$key]['remove']), 'class' => 'qt-tab-remove') ) ); // Add additional attributes to the row, such as a class for this row. if (isset($form[$key]['#attributes'])) { $row = array_merge($row, $form[$key]['#attributes']); } $rows[] = $row; } $output = theme('table', $headers, $rows, array('id' => 'qt-tablist-table')); $output .= drupal_render($form); return $output; } function quicktabs_form_validate($form_id, $form_values) { if ($form_values['op'] == t('Submit')) { if (empty($form_values['title'])) { form_set_error('title', t('You must give your Quick Tabs block a title.')); } else { foreach ($form_values['tabs'] as $i => $tab) { if (empty($tab['tabtext'])) { form_set_error($form_values['tabs'][$i]['tabtext'], t('You must give each tab a title.')); } if ($tab['tabtype'] == 'view' && empty($tab['limit'])) { form_set_error($form_values['tabs'][$i]['limit'], t('You must enter a limit for each view.')); } } } } else { return; } } function quicktabs_form_submit($form_id, $form_values) { if ($form_values['op'] == t('Submit')) { $formvalues_tabs = array(); foreach ($form_values['tabs'] as $i => $tab) { $formvalues_tabs[] = array( 'title' => $tab['tabtext'], 'type' => $tab['tabtype'], 'weight' => $tab['tabweight'], 'bvid' => ($tab['tabtype'] == 'block' ? $tab['bid'] : $tab['vid']), 'args' => ($tab['tabtype'] == 'block' ? '' : $tab['args']), 'limit' => ($tab['tabtype'] == 'block' ? '0' : $tab['limit']), 'build' => ($tab['tabtype'] == 'block' ? '' : $tab['build']) ); } $fullcontent = array( 'blocktitle' => $form_values['title'], 'blockcontent' => $formvalues_tabs, ); if ($form_values['formtype'] == 'edit') { $qtid = $form_values['qtid']; quicktabs_updateblock($qtid, $fullcontent); $msg = t('Your Quick Tabs block has been updated.'); } else { quicktabs_createblock($fullcontent); $msg = t('Your Quick Tabs block has been created and can now be enabled.'); } drupal_set_message($msg); return 'admin/build/block'; } } function quicktabs_createblock($fullcontent) { $qtid = db_next_id('quicktabs'); $title = $fullcontent['blocktitle']; $tabs = serialize($fullcontent['blockcontent']); db_query("INSERT INTO {quicktabs} (qtid, title, tabs) VALUES(%d, '%s', '%s')", $qtid, $title, $tabs); return; } function quicktabs_updateblock($qtid, $fullcontent) { $title = $fullcontent['blocktitle']; $tabs = serialize($fullcontent['blockcontent']); db_query("UPDATE {quicktabs} SET title='%s', tabs='%s' WHERE qtid=%d", $title, $tabs, $qtid); return; } function quicktabs_set_js() { $effect = variable_get('quicktabs_effect', 'none'); $quicktabs_settings = array( 'effect' => $effect, ); drupal_add_js(array('quicktabs' => $quicktabs_settings), 'setting'); } /** * Implementation of hook_block */ function quicktabs_block($op = 'list', $delta = 0, $edit = array()) { switch ($op) { case 'list': $jqueryblocks = array(); $result = db_query('SELECT * FROM {quicktabs}'); while ($row = db_fetch_object($result)) { $jqueryblocks[$row->qtid] = $row->title; } foreach ($jqueryblocks as $key => $val) { $blocks[$key]['info'] = t($val); } return $blocks; break; case 'view': if ($jqueryblock = db_fetch_object(db_query('SELECT qtid, title, tabs FROM {quicktabs} WHERE qtid = %d', $delta))) { quicktabs_add_css(); drupal_add_js(drupal_get_path('module', 'quicktabs') .'/js/quicktabs.js'); $mainblock['subject'] = $jqueryblock->title; $tabs = unserialize($jqueryblock->tabs); if ($tabs[0]['weight']) { foreach ($tabs as $key => $tab) { $weight[$key] = $tab['weight']; } array_multisort($weight, SORT_ASC, $tabs); } $tabtitles = array(); foreach ($tabs as $tab) { $tabtitles[] = $tab['title']; } $output = '
'; $output .= theme('quicktabs_tabs', $tabtitles); $output .= '
'; foreach ($tabs as $j => $tab) { $output .= '
'; if ($tab['type'] == 'view') { if (module_exists('views')) { if ($tab['args']!='') { $args = explode(',', $tab['args']); } else { $args = array(); } $view = views_get_view($tab['bvid']); $viewbuild = $tab['build'] ? $tab['build'] : variable_get('quicktabs_viewbuild', 'embed'); $output .= views_build_view($viewbuild, $view, $args, false, $tab['limit']); } else { $output .= 'Views module not enabled, cannot display tab content'; } } else { $pos = strpos($tab['bvid'], '_delta_'); $blockmodule = substr($tab['bvid'], 0, $pos); $blockdelta = substr($tab['bvid'], $pos+7); $block = (object) module_invoke($blockmodule, 'block', 'view', $blockdelta); $block->module = $blockmodule; $block->delta = $blockdelta; if (variable_get('quicktabs_blocktitles', 1) == 1) { $output .= $block->content ? theme('quicktabs_block', $block, TRUE) : ''; } else { $output .= $block->content ? theme('quicktabs_block', $block, FALSE) : ''; } } $output .= '
'; } $output .= '
'; $mainblock['content'] = $output; } return $mainblock; break; } } function theme_quicktabs_block($block, $title = TRUE) { $output = "
module\" id=\"block-$block->module-$block->delta\">\n"; if ($title) { $output .= "

$block->subject

\n"; } $output .= "
$block->content
\n"; $output .= "
\n"; return $output; } /** * 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. */ function theme_quicktabs_tabs($tabs) { $output .= ''; return $output; } function quicktabs_block_get_name($qtid) { $result = db_result(db_query('SELECT title FROM {quicktabs} WHERE qtid=%d', $qtid)); return $result; } function quicktabs_block_delete($qtid) { $qt_name = quicktabs_block_get_name($qtid); $form['qtid'] = array('#type' => 'hidden', '#value' => $qtid); $form['qt_name'] = array('#type' => 'hidden', '#value' => $qt_name); return confirm_form($form, t('Are you sure you want to delete the Quick Tabs block %name?', array('%name' => $qt_name)), 'admin/build/quicktabs', '', t('Delete'), t('Cancel')); } function quicktabs_block_edit($qtid) { if ($qtblock = db_fetch_object(db_query('SELECT title, tabs FROM {quicktabs} WHERE qtid = %d', $qtid))) { $tabs = unserialize($qtblock->tabs); $form_values = array( 'step' => 2, 'qtid' => $qtid, 'title' => $qtblock->title, 'num_tabs' => count($tabs), 'tabs' => $tabs, 'formtype' => 'edit', ); drupal_add_js(drupal_get_path('module', 'quicktabs') .'/js/quicktabs_form.js'); drupal_add_css(drupal_get_path('module', 'quicktabs') .'/quicktabs.css'); $output = ''; $output .= drupal_get_form('quicktabs_form', $form_values); return $output; } else { drupal_goto('admin/build/quicktabs'); } } /** * Deletion of Quick Tabs blocks. */ function quicktabs_block_delete_submit($form_id, $form_values) { db_query('DELETE FROM {quicktabs} WHERE qtid = %d', $form_values['qtid']); drupal_set_message(t('The Quick Tabs block %name has been removed.', array('%name' => $form_values['qt_name']))); cache_clear_all(); return 'admin/build/quicktabs'; }; /** * Callback function for admin/settings/quicktabs. Display the settings form. */ function quicktabs_settings() { $form = array(); $form['quicktabs_tabstyle'] = array( '#type' => 'radios', '#title' => t('Tab Style'), '#options' => array('default' => t('Default (no style)')) + module_invoke_all('quicktabs_tabstyles'), '#default_value' => variable_get('quicktabs_tabstyle', 'default'), '#description' => t('Choose a tab style for your Quick Tabs blocks.'), '#attributes' => array('class' => 'quicktabs-tabstyles clear-block'), ); $form['quicktabs_blocktitles'] = array( '#type' => 'checkbox', '#title' => t('Show block titles within Quick Tabs blocks'), '#default_value' => variable_get('quicktabs_blocktitles', 1), ); $form['quicktabs_viewbuild'] = array( '#type' => 'radios', '#title' => t('Choose how your views should be built within Quick Tabs blocks'), '#options' => array('embed' => 'Embed', 'block' => 'Block', 'page' => 'Page'), '#default_value' => variable_get('quicktabs_viewbuild', 'embed'), ); $form['quicktabs_effect'] = array( '#type' => 'radios', '#title' => t('Choose an effect for your tabs'), '#options' => array('none' => 'None', 'slide' => 'Slide', 'fade' => 'Fade'), '#default_value' => variable_get('quicktabs_effect', 'none'), ); return system_settings_form($form); } function theme_quicktabs_settings($form) { quicktabs_add_css(); drupal_set_title(t('Quick Tabs Settings')); // Default preview. $form['quicktabs_tabstyle']['default']['#description'] = 'Default '. t('Preview') .':
'; // Preview for each style. $tabstyle_number = 0; foreach (element_children($form['quicktabs_tabstyle']) as $tabstyle_key) { if ($tabstyle_key != 'default') { $form['quicktabs_tabstyle'][$tabstyle_key]['#description'] = $form['quicktabs_tabstyle'][$tabstyle_key]['#title'] .' '. t('Preview') .':
'; $tabstyle_number++; } } return drupal_render($form); } /** * Callback function for quicktabs/preview. */ function quicktabs_preview_page($tabstyle_number = NULL) { $tabstyles = module_invoke_all('quicktabs_tabstyles'); $css_files = array_keys($tabstyles); if (isset($css_files[$tabstyle_number])) { quicktabs_add_css($css_files[$tabstyle_number]); } else { quicktabs_add_css('default'); } drupal_add_js(drupal_get_path('module', 'quicktabs') .'/js/quicktabs.js'); print theme('quicktabs_preview_page'); exit; } function theme_quicktabs_preview_page() { $output = "\n"; $output .= ''; $output .= ''; $output .= ' '. t('Quick Tabs Preview') .''; $output .= drupal_get_html_head(); $output .= drupal_get_css(); $output .= drupal_get_js(); $output .= ' '; $output .= ' '; $output .= '
'; $output .= ''; $output .= '
'; $output .= ''; return $output; } /** * Fetch the necessary CSS files for the tab styles. */ function quicktabs_add_css($tabstyle_css = NULL) { // Add quicktabs CSS. drupal_add_css(drupal_get_path('module', 'quicktabs') .'/quicktabs.css'); // Add specific CSS. if (!isset($tabstyle_css)) { $tabstyle_css = variable_get('quicktabs_tabstyle', 'default'); } if ($tabstyle_css != 'default') { drupal_add_css($tabstyle_css, 'module'); } } /** * Implementation of hook_quicktabs_widgets. * * This hook allows other modules to create additional tab styles for * the quicktabs module. * * @return array * An array of key => value pairs suitable for inclusion as the #options in a * select or radios form element. Each key must be the location of a css * file for a quick tabs style. Each value should be the name of the style. */ function quicktabs_quicktabs_tabstyles() { $tabstyles_directory = drupal_get_path('module', 'quicktabs') .'/tabstyles'; $files = file_scan_directory($tabstyles_directory, '\.css$'); $tabstyles = array(); foreach ($files as $file) { $tabstyles[$file->filename] = drupal_ucfirst($file->name); } return $tabstyles; }