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

Entradas populares