The Quick Tabs module allows you to create blocks of tabbed content. Clicking on the tabs makes the corresponding content display instantly (it uses jQuery). The content for each tabbed section can be either a node, view, block or another quicktab. 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 quicktab block show up in your block listing, ready to be configured and enabled like other blocks. Multiple quicktabs can be placed on a single page.

Visit the configuration page to see the available styles and select the default style for your quicktabs.

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

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

'; } } /** * Implementation of hook_theme(). */ function quicktabs_theme() { return array( 'quicktabs_settings' => array( 'arguments' => array('form' => NULL), 'file' => 'includes/admin.inc', ), 'quicktabs_admin_form_tabs' => array( 'arguments' => array('form' => NULL), 'file' => 'includes/admin.inc', ), 'quicktabs_tabs' => array( 'arguments' => array('quicktabs', 'active_tab' => 'none'), ), 'quicktabs' => array( 'arguments' => array('quicktabs'), ), ); } /** * Implementation of hook_menu(). */ function quicktabs_menu() { $items['admin/build/quicktabs'] = array( 'title' => 'Quicktabs', 'description' => 'Create blocks of tabbed content.', 'page callback' => 'quicktabs_list', 'access callback' => 'user_access', 'access arguments' => array('administer quicktabs'), 'type' => MENU_NORMAL_ITEM, 'file' => 'includes/admin.inc', ); $items['admin/build/quicktabs/list'] = array( 'title' => 'List', 'type' => MENU_DEFAULT_LOCAL_TASK, ); $items['admin/build/quicktabs/add'] = array( 'title' => 'New QT block', 'page callback' => 'drupal_get_form', 'page arguments' => array('quicktabs_form', 'add'), 'access arguments' => array('administer quicktabs'), 'type' => MENU_LOCAL_TASK, 'file' => 'includes/admin.inc', ); $items['admin/build/quicktabs/%quicktabs/edit'] = array( 'title' => 'Edit QT block', 'page callback' => 'drupal_get_form', 'page arguments' => array('quicktabs_form', 'edit', 3), 'access arguments' => array('administer quicktabs'), 'type' => MENU_CALLBACK, 'file' => 'includes/admin.inc', ); $items['admin/build/quicktabs/%quicktabs/delete'] = array( 'title' => 'Delete QT block', 'page callback' => 'drupal_get_form', 'page arguments' => array('quicktabs_block_delete', 3), 'access arguments' => array('administer quicktabs'), 'type' => MENU_CALLBACK, 'file' => 'includes/admin.inc', ); $items['admin/build/quicktabs/%quicktabs/clone'] = array( 'title' => 'Clone QT block', 'page callback' => 'quicktabs_clone', 'page arguments' => array(3), 'access arguments' => array('administer quicktabs'), 'type' => MENU_CALLBACK, 'file' => 'includes/admin.inc', ); $items['admin/settings/quicktabs'] = array( 'title' => 'Quicktabs', 'description' => 'Select the default style for quicktabs.', 'page callback' => 'drupal_get_form', 'page arguments' => array('quicktabs_settings'), 'access callback' => 'user_access', 'access arguments' => array('administer site configuration'), 'type' => MENU_NORMAL_ITEM, 'file' => 'includes/admin.inc', ); $items['quicktabs/ahah'] = array( 'page callback' => 'quicktabs_ahah', 'access callback' => 'user_access', 'access arguments' => array('administer quicktabs'), 'type' => MENU_CALLBACK, 'file' => 'includes/admin.inc', ); $items['quicktabs/ajax/node'] = array( 'page callback' => 'quicktabs_ajax_node', 'access callback' => 'user_access', 'access arguments' => array('access content'), 'type' => MENU_CALLBACK, ); $items['quicktabs/ajax/block'] = array( 'page callback' => 'quicktabs_ajax_block', 'access callback' => 'user_access', 'access arguments' => array('access content'), 'type' => MENU_CALLBACK, ); $items['quicktabs/ajax/qtabs'] = array( 'page callback' => 'quicktabs_ajax_qtabs', 'access callback' => 'user_access', 'access arguments' => array('access content'), 'type' => MENU_CALLBACK, ); return $items; } /** * Implementation of hook_perm(). */ function quicktabs_perm() { return array('administer quicktabs'); } /** * Implementation of hook_block(). */ function quicktabs_block($op = 'list', $delta = 0, $edit = array()) { switch ($op) { case 'list': $blocks = array(); $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': $mainblock = array(); if ($quicktabs = quicktabs_load($delta)) { $mainblock['subject'] = $quicktabs['title']; $mainblock['content'] = theme('quicktabs', $quicktabs); } return $mainblock; break; } } /** * Render quicktabs. */ function quicktabs_render($quicktabs) { $tabs_count = count($quicktabs['tabs']); if ($tabs_count <= 0) { return ''; } if ($quicktabs['style'] == 'default') { $quicktabs['style'] = variable_get('quicktabs_tabstyle', 'nostyle'); } quicktabs_add_css($quicktabs['style']); drupal_add_js('misc/progress.js', 'core'); drupal_add_js(drupal_get_path('module', 'quicktabs') .'/js/quicktabs.js'); $attributes = drupal_attributes(array( 'id' => 'quicktabs-'. $quicktabs['qtid'], 'class' => 'quicktabs_wrapper quicktabs-style-'. drupal_strtolower($quicktabs['style']), )); $output = ''; $active_tab = _quicktabs_get_active_tab($quicktabs); $output .= theme('quicktabs_tabs', $quicktabs, $active_tab); // The main content area, each quicktab container needs a unique id. $attributes = drupal_attributes(array( 'id' => 'quicktabs_container_'. $quicktabs['qtid'], 'class' => 'quicktabs_main quicktabs-style-'. drupal_strtolower($quicktabs['style']), )); $output .= ''; if ($quicktabs['ajax'] and _quicktabs_javascript_enabled()) { // Prepare ajax views. _quicktabs_prepare_views($quicktabs['tabs']); } if (!$quicktabs['ajax'] and _quicktabs_javascript_enabled()) { // Render all tabpgages. foreach ($quicktabs['tabs'] as $key => $tab) { $attributes = drupal_attributes(array( 'id' => 'quicktabs_tabpage_'. $quicktabs['qtid'] .'_'. $key, 'class' => 'quicktabs_tabpage', )); $output .= ''. quicktabs_render_tabpage($tab) .''; } } else { // Render only the active tabpage. if (isset($active_tab)) { $attributes = drupal_attributes(array( 'id' => 'quicktabs_tabpage_'. $quicktabs['qtid'] .'_'. $active_tab, 'class' => 'quicktabs_tabpage', )); $output .= ''. quicktabs_render_tabpage($quicktabs['tabs'][$active_tab]) .''; } } $output .= ''; return $output; } /** * Ajax callback for node tabpage. */ function quicktabs_ajax_node($nid, $teaser, $hide_title) { $tabpage = array( 'type' => 'node', 'nid' => $nid, 'teaser' => $teaser, 'hide_title' => $hide_title, ); $output = quicktabs_render_tabpage($tabpage); print drupal_to_js(array('status' => TRUE, 'data' => $output)); } /** * Ajax callback for block tabpage. */ function quicktabs_ajax_block($bid, $hide_title) { $tabpage = array( 'type' => 'block', 'bid' => $bid, 'hide_title' => $hide_title, ); $output = quicktabs_render_tabpage($tabpage); print drupal_to_js(array('status' => TRUE, 'data' => $output)); } /** * Ajax callback for qtabs tabpage. */ function quicktabs_ajax_qtabs($qtid) { $tabpage = array( 'type' => 'qtabs', 'qtid' => $qtid, ); $output = quicktabs_render_tabpage($tabpage); print drupal_to_js(array('status' => TRUE, 'data' => $output)); } /** * Theme function to output quicktabs. * * @ingroup themeable */ function theme_quicktabs($quicktabs) { return quicktabs_render($quicktabs); } /** * 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 theme_quicktabs_tabs($quicktabs, $active_tab = 'none') { $output = ''; $tabs_count = count($quicktabs['tabs']); if ($tabs_count <= 0) { return $output; } $index = 1; $output .= '
    '; 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 .= ''. $tab['title'] .''; $index++; } $output .= '
'; return $output; } /** * Helper function to construct tab attributes. */ function _quicktabs_construct_tab_attributes($quicktabs, $tabkey) { $qtid = $quicktabs['qtid']; $ajax = $quicktabs['ajax']; $tab = $quicktabs['tabs'][$tabkey]; $details = array(); switch ($tab['type']) { case 'qtabs': $details = array($tab['qtid']); break; case 'view': if (module_exists('views')) { if ($tab['args'] != '') { $details = array($tab['vid'], $tab['display'], str_replace(',', '-', $tab['args'])); } else { $details = array($tab['vid'], $tab['display']); } } break; case 'node': $details = array($tab['nid'], $tab['teaser'], $tab['hide_title']); break; case 'block': $details = array($tab['bid'], $tab['hide_title']); break; case 'freetext': $details = array(); break; } $id = implode('--', array_merge(array($tab['type'], $qtid, $tabkey), $details)); // Need to construct a path for the tab links. $fullpath = explode('?', request_uri()); $href = $fullpath[0]; if ($ajax or !_quicktabs_javascript_enabled()) { $queries = $_GET; unset($queries['quicktabs_'. $qtid]); unset($queries['q']); unset($queries['page']); $querystring = ''; if (!empty($queries)) { $i = 0; foreach ($queries as $key => $value) { $querystring .= $i > 0 ? '&'. $key .'='. $value : $key .'='. $value; $i++; } $querystring .= '&'; } $href .= '?'. $querystring; $href .= 'quicktabs_'. $qtid .'='. $tabkey; } if ($ajax) { $class = 'qt_ajax_tab'; } else { $class = 'qt_tab'; $href .= '#quicktabs-'. $qtid; } $attributes = drupal_attributes(array( 'id' => $id, 'class' => $class, 'href' => $href, )); return $attributes; } /** * Fetch the necessary CSS files for the tab styles. */ function quicktabs_add_css($style) { // Add quicktabs CSS. drupal_add_css(drupal_get_path('module', 'quicktabs') .'/css/quicktabs.css'); if ($style == 'default') { // Get the default style. $style = variable_get('quicktabs_tabstyle', 'nostyle'); } $style_css = _quicktabs_get_style_css($style); if ($style_css != 'nostyle') { drupal_add_css($style_css, 'module'); } } /** * Helper function to get the css file for given style. */ function _quicktabs_get_style_css($style = 'nostyle') { static $tabstyles; if ($style != 'nostyle') { if (!isset($tabstyles)) { $tabstyles = module_invoke_all('quicktabs_tabstyles'); } foreach ($tabstyles as $css_file => $tabstyle) { if ($style == $tabstyle) { return $css_file; } } } return 'nostyle'; } /** * Implementation of hook_quicktabs_tabstyles(). * * 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) { // Skip RTL files. if (!strpos($file->name, '-rtl')) { $tabstyles[$file->filename] = drupal_ucfirst($file->name); } } return $tabstyles; } /** * Load the quicktabs data. */ function quicktabs_load($qtid) { $quicktabs = db_fetch_array(db_query('SELECT qtid, title, tabs, ajax, style FROM {quicktabs} WHERE qtid = %d', $qtid)); if (!$quicktabs) { return FALSE; } $tabs = unserialize($quicktabs['tabs']); foreach ($tabs as $key => $tab) { $weight[$key] = $tab['weight']; if ($tab['type'] == 'qtabs' and $tab['qtid'] == $qtid) { unset($tabs[$key]); unset($weight[$key]); } } array_multisort($weight, SORT_ASC, $tabs); $quicktabs['tabs'] = $tabs; return $quicktabs; } /** * Render quicktabs tabpage. */ function quicktabs_render_tabpage($tab) { $output = ' '; switch ($tab['type']) { case 'qtabs': if (isset($tab['qtid'])) { if ($quicktabs = quicktabs_load($tab['qtid'])) { $output = theme('quicktabs', $quicktabs); } } case 'view': if (isset($tab['vid'])) { if (module_exists('views')) { $args = array(); if ($tab['args'] != '') { $args_array = explode(',', $tab['args']); foreach ($args_array as $arg) { $args[] = trim($arg); } } $func_args = array_merge(array($tab['vid'], $tab['display']), $args); $output = call_user_func_array('views_embed_view', $func_args); } else { $output = t('Views module not enabled, cannot display tab content.'); } } break; case 'block': if (isset($tab['bid'])) { $pos = strpos($tab['bid'], '_delta_'); $blockmodule = substr($tab['bid'], 0, $pos); $blockdelta = substr($tab['bid'], $pos + 7); $block = (object) module_invoke($blockmodule, 'block', 'view', $blockdelta); if (isset($block->content)) { $block->module = $blockmodule; $block->delta = $blockdelta; $block->region = 'quicktabs'; if ($tab['hide_title'] or !isset($block->subject)) { $block->subject = FALSE; } $output = theme('block', $block); } } break; case 'node': if (isset($tab['nid'])) { $node = node_load($tab['nid']); if (!empty($node)) { $output = node_view($node, $tab['teaser'], $tab['hide_title'], FALSE); } } break; case 'freetext': $output = $tab['text']; break; } return $output; } /** * Helper function to determine if the user has javascript enabled. */ function _quicktabs_javascript_enabled() { return (isset($_COOKIE['has_js']) && $_COOKIE['has_js']); } /** * Helper function to determine active tab from the url. */ function _quicktabs_get_active_tab($quicktabs) { $active_tab = isset($_GET['quicktabs_'. $quicktabs['qtid']]) ? $_GET['quicktabs_'. $quicktabs['qtid']] : key($quicktabs['tabs']); if (isset($active_tab) and isset($quicktabs['tabs'][$active_tab])) { return $active_tab; } return NULL; } /** * Helper function to add views settings to ajax tabs. */ function _quicktabs_prepare_views($tabs) { if (module_exists('views')) { views_add_js('ajax_view'); views_add_css('views'); foreach ($tabs as $key => $tab) { if ($tab['type'] == 'view') { $args_array = explode(',', $tab['args']); foreach ($args_array as $arg) { $args[] = trim($arg); } // We need to pass view details to js in case there is ajax paging. $settings = array( 'views' => array( 'ajax_path' => url('views/ajax'), 'ajaxViews' => array( array( 'view_name' => $tab['vid'], 'view_display_id' => $tab['display'], 'view_args' => implode('/', $args), 'view_path' => $_GET['q'], ), ), ), ); drupal_add_js($settings, 'setting'); } } } }