Cómo crear un tabs Drupal 7 sin Quicktab
Hola a todos, algún momento me la pasé viendo como hacer un tab sencillo para llamar unos contenidos y aquí les dejo para que prueben y sigamos mejorando.
nombre_module.module
<?php
function tbo3_transactions_menu() {
$items['ejemplo_tabs']= array(
'title' => t("Ejemplo de tabs"),
'page callback' => 'drupal_get_form',
'page arguments' => array('funcion_tabs_form'),
'access arguments' => array('access'),
'file' => 'nombre_modulo.pages.inc'
);
return $items;
}
Ya en el nombre_modulo.pages.inc
function funcion_tabs_form($form, $form_state){
$form = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('summary-enterprise')
),
);
$form['header_container']['line'] = array(
'#title' => 'Line',
'#type' => 'select',
'#options' => array(50233333, 123),
// '#ajax' => array(
// 'event'=>'change',
// 'callback' =>'tbo_billing_history_list_callback',
// 'wrapper' => 'list-wrapper',
// ),
);
$form['body_container']['wrapper'] = array(
'#prefix' => '<div id="list-wrapper">',
'#suffix' => '</div>',
);
$form['body_container']['wrapper']['buttons'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('region-statistics-header-buttons'),
),
);
$form['body_container']['wrapper']['buttons']['plan'] = array(
'#type' => 'html_tag',
'#tag' => 'span',
'#value' => '<a href="#">' . t('Plan') . '</a>',
'#attributes' => array(
'class' => array('show-plan-section', 'active'),
),
);
$form['body_container']['wrapper']['buttons']['favorites'] = array(
'#type' => 'html_tag',
'#tag' => 'span',
'#value' => '<a href="#">' . t('My favorites') . '</a>',
'#attributes' => array(
'class' => array('show-favorite-section'),
),
);
//Plan section
$form['body_container']['inner']['plan'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('favorite-plan-section'),
),
);
$form['body_container']['inner']['plan']['details'] = array(
'#markup' => theme('nombre_modulo_ejemplo', array('line' => '', $msisdn)),
);
$form['body_container']['inner']['plan']['line'] = array(
'#markup' => theme('tbo3_transactions_line_detail', array('line' => $line)),
);
//
// //Favorite section
$form['body_container']['inner']['favorite'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('favorite-favorite-section'),
),
);
$favorite_plans = array(nombre, apellido);
foreach ($favorite_plans as $key => $value) {
$form['body_container']['inner']['favorite']['details'][$key] = array(
'#markup' => theme('tbo3_transactions_favorite_numbers', array('plans' => $value)),
);
}
$form['#attached']['css'][] = drupal_get_path('module', 'nombre_modulo') . '/css/styles.css';
$form['#attached']['js'][] = drupal_get_path('module', 'nombre_modulo') . '/js/tbo3_transactions.js';
return $form;
}
Este va en nombre_modulo.themes.inc
function theme_nombre_modulo_ejemplo($variables) {
$build = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('manage-favorites-wrapper', 'tbo-box', 'plan-details'),
),
);
$build['inner'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('clearfix', 'box-inner'),
),
);
// Header!
$build['inner']['header'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('client-info-header', 'header-content-tbo'),
),
);
$build['inner']['header']['title'] = array(
'#type' => 'html_tag',
'#tag' => 'h2',
'#value' => t('Plan Tigo 25'),
'#attributes' => array(
'class' => array('client-info-title', 'box-title-tbo'),
),
);
$build['inner']['middle'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('clearfix', 'box-inner'),
),
);
//Left part in the middle.
$build['inner']['middle']['left'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('block-middle-favorite', 'left'),
),
);
$build['inner']['middle']['left']['title'] = array(
'#type' => 'html_tag',
'#tag' => 'div',
'#value' => t('Bill'),
'#attributes' => array(
'class' => array('block-middle-favorite-title'),
),
);
$build['inner']['middle']['left']['value'] = array(
'#type' => 'html_tag',
'#tag' => 'div',
'#value' => t('$9.966'),
'#attributes' => array(
'class' => array('block-middle-favorite-value'),
),
);
$build['inner']['middle']['left']['link'] = array(
'#type' => 'link',
'#title' => t('Pay bill'),
'#href' => 'http://google.com',
'#attributes' => array(
'class' => array('block-middle-favorite-link', 'tbo-link-gray-box'),
),
);
);
$header = array(
array('data' => t('Detail')),
array('data' => t('Plan')),
array('data' => t('Consumed')),
);
$rows = array(
array('Minutos tigo', 100, 10),
array('Minutos otros', 200, 19),
array('Minutos Larga Distancia', 100, 38),
array('SMS Tigo', 300, 5),
array('SMS otros', 500, 20),
array('Datos', 800, 60),
);
//table part
$consumed_table = array(
'#theme' => 'table',
'#header' => $header,
'#rows' => $rows,
'#attributes' => array(),
'#caption' => '',
'#colgroups' => array(),
'#sticky' => FALSE,
'#empty' => t('No data available'),
);
$build['inner']['details']['consumed'] = $consumed_table;
$build['inner']['details']['links'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('links-container-favorites'),
),
);
$build['inner']['details']['links']['extend_limit'] = array(
'#type' => 'link',
'#title' => t('Extend Limit saldo'),
'#href' => 'http://google.com',
'#attributes' => array(
'class' => array('tbo-link-gray-box'),
),
);
$build['inner']['details']['links']['change_plan'] = array(
'#type' => 'link',
'#title' => t('Change Plan'),
'#href' => 'http://google.com',
'#attributes' => array(
'class' => array('tbo-link-gray-box'),
),
);
$output = render($build);
return $output;
}
el archivo .js
(function ($) {
Drupal.behaviors.nombre_modulo = {
attach: function (context, settings) {
$('.show-plan-section').click(function() {
$('.show-favorite-section').removeClass('active');
$(this).addClass('active');
$('.favorite-favorite-section').hide();
$('.favorite-plan-section').show();
return false;
});
$('.show-favorite-section').click(function() {
$('.show-plan-section').removeClass('active');
$(this).addClass('active');
$('.favorite-favorite-section').show();
$('.favorite-plan-section').hide();
return false;
});
}
};
})(jQuery

Comentarios
Publicar un comentario