Initial tab implementation for issue 5

css/cmb2.css

@@ -737,6 +737,55 @@ Post Metaboxes
 	padding-right: 0;
 }
 
+/* line 122, sass/partials/_post_metaboxes.scss */
+
+.tabbed .inside > ul {
+	width: 20%;
+	float: left;
+}
+
+/* line 128, sass/partials/_post_metaboxes.scss */
+
+.tabbed .inside > ul li > a {
+	padding: 7px;
+	display: block;
+	text-decoration: none;
+}
+
+/* line 133, sass/partials/_post_metaboxes.scss */
+
+.tabbed .inside > ul li > a:focus {
+	outline: none;
+}
+
+/* line 141, sass/partials/_post_metaboxes.scss */
+
+.tabbed .inside > ul li.ui-state-active a {
+	background-color: #e9e9e9;
+}
+
+/* line 151, sass/partials/_post_metaboxes.scss */
+
+.tabbed .inside .cmb-row {
+	width: 75%;
+	float: left;
+	border-bottom: none;
+	border-left: 1px solid #e9e9e9;
+	padding-left: 20px;
+	margin-bottom: 0;
+	min-height: 150px;
+}
+
+/* line 161, sass/partials/_post_metaboxes.scss */
+
+.tabbed .inside .cmb-remove-field-row {
+	width: 100%;
+	border-top: 1px solid #e9e9e9;
+	padding-left: 0;
+	border-left: none;
+	min-height: inherit;
+}
+
 /*--------------------------------------------------------------
 Misc.
 --------------------------------------------------------------*/

css/sass/partials/_post_metaboxes.scss

@@ -114,3 +114,58 @@ Post Metaboxes
 		}
 	}
 }
+
+.tabbed {
+
+	.inside {
+
+		> ul {
+			width: 20%;
+			float: left;
+
+			li {
+
+				> a {
+					padding: 7px;
+					display: block;
+					text-decoration: none;
+
+					&:focus {
+						outline: none;
+					}
+
+				}
+
+				&.ui-state-active {
+
+					a {
+						background-color: #e9e9e9;
+					}
+
+				}
+
+			}
+
+		}
+
+		.cmb-row {
+			width: 75%;
+			float: left;
+			border-bottom: none;
+			border-left: 1px solid #e9e9e9;
+			padding-left: 20px;
+			margin-bottom: 0;
+			min-height: 150px;
+		}
+
+		.cmb-remove-field-row {
+			width: 100%;
+			border-top: 1px solid #e9e9e9;
+			padding-left: 0;
+			border-left: none;
+			min-height: inherit;
+		}
+
+	}
+
+}

includes/CMB2.php

@@ -263,6 +263,7 @@ public function render_group( $args ) {
 		$desc            = $field_group->args( 'description' );
 		$label           = $field_group->args( 'name' );
 		$sortable        = $field_group->options( 'sortable' ) ? ' sortable' : ' non-sortable';
+		$tabbed        	 = $field_group->options( 'tabs' ) ? ' tabbed' : ' non-tabbed';
 		$repeat_class    = $field_group->args( 'repeatable' ) ? ' repeatable' : ' non-repeatable';
 		$group_val       = (array) $field_group->value();
 		$nrows           = count( $group_val );
@@ -271,7 +272,7 @@ public function render_group( $args ) {
 
 		$field_group->peform_param_callback( 'before_group' );
 
-		echo '<div class="cmb-row cmb-repeat-group-wrap"><div class="cmb-td"><div id="', $field_group->id(), '_repeat" class="cmb-nested cmb-field-list cmb-repeatable-group', $sortable, $repeat_class, '" style="width:100%;">';
+		echo '<div class="cmb-row cmb-repeat-group-wrap"><div class="cmb-td"><div id="', $field_group->id(), '_repeat" class="cmb-nested cmb-field-list cmb-repeatable-group', $sortable, $repeat_class, $tabbed, '" style="width:100%;">';
 
 		if ( $desc || $label ) {
 			$class = $desc ? ' cmb-group-description' : '';
@@ -327,6 +328,19 @@ public function render_group_row( $field_group, $remove_disabled ) {
 			<h3 class="cmb-group-title cmbhandle-title"><span>', $field_group->replace_hash( $field_group->options( 'group_title' ) ), '</span></h3>
 
 			<div class="inside cmb-td cmb-nested cmb-field-list">';
+
+				// If tabbbed = true, display tab menu
+				if ( $field_group->options( 'tabs' ) ) {
+
+					echo "<ul>";
+
+					foreach ( array_values( $field_group->args( 'fields' ) ) as $field_args ) {
+						echo "<li><a href=\"#{$field_group->args( 'id' )}_{$field_group->index}_{$field_args['id']}\">" . $field_args['name'] . "</a></li>";
+					}
+
+					echo "</ul>";
+				}
+
 				// Loop and render repeatable group fields
 				foreach ( array_values( $field_group->args( 'fields' ) ) as $field_args ) {
 					if ( 'hidden' == $field_args['type'] ) {
@@ -345,6 +359,7 @@ public function render_group_row( $field_group, $remove_disabled ) {
 						$field = $this->get_field( $field_args, $field_group )->render_field();
 					}
 				}
+
 				if ( $field_group->args( 'repeatable' ) ) {
 					echo '
 					<div class="cmb-row cmb-remove-field-row">

includes/CMB2_Field.php

@@ -667,7 +667,7 @@ public function render_field() {
 
 		$this->peform_param_callback( 'before_row' );
 
-		printf( "<div class=\"cmb-row %s\">\n", $this->row_classes() );
+		printf( "<div id=\"{$this->args('id')}\" class=\"cmb-row %s\">\n", $this->row_classes() );
 
 		if ( 'title' == $this->type() || ! $this->args( 'show_names' ) ) {
 			echo "\t<div class=\"cmb-td\">\n";

includes/CMB2_JS.php

@@ -65,6 +65,9 @@ public static function enqueue() {
 			wp_register_script( 'jquery-ui-datetimepicker', cmb2_utils()->url( 'js/jquery-ui-timepicker-addon.min.js' ), array( 'jquery-ui-slider' ), CMB2_VERSION );
 		}
 
+		// Use Tabs	
+		wp_enqueue_script('jquery-ui-tabs');
+
 		// Only use minified files if SCRIPT_DEBUG is off
 		$debug = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
 		$min   = $debug ? '' : '.min';

js/cmb2.js

@@ -64,6 +64,9 @@ window.CMB2 = (function(window, document, $, undefined){
 		// Make File List drag/drop sortable:
 		cmb.makeListSortable();
 
+		// Enable tabs if defined
+		$metabox.find('.inside').tabs();
+
 		$metabox
 			.on( 'change', '.cmb2_upload_file', function() {
 				cmb.formfield = $(this).attr('id');