Added very simple but working implementation of the tabs widget

etemplate/js/et2_selectbox.js

@@ -79,7 +79,7 @@ var et2_selectbox = et2_inputWidget.extend({
 		this.setDOMNode(this.input[0]);
 	},
 
-	set_id: function(_id) {
+	loadingFinished: function() {
 		this._super.apply(this,arguments);
 
 		// Get select options from the manager(s)

etemplate/js/et2_tabs.js

@@ -28,18 +28,10 @@ var et2_tabbox = et2_DOMWidget.extend({
 			.addClass("et2_tabbox");
 
 		// Create the upper container for the tab flags
-		var cntr = $j(document.createElement("div"))
-			.addClass("et2_flags")
+		this.flagContainer = $j(document.createElement("div"))
+			.addClass("et2_tabheader")
 			.appendTo(this.container);
 
-		this.flagContainer = $j(document.createElement("span"))
-			.addClass("et2_tabflagcntr")
-			.appendTo(cntr);
-
-		$j(document.createElement("span"))
-			.addClass("et2_tabspacer")
-			.appendTo(cntr);
-
 		// Create the lower tab container
 		this.tabContainer = $j(document.createElement("div"))
 			.addClass("et2_tabs")
@@ -130,18 +122,15 @@ var et2_tabbox = et2_DOMWidget.extend({
 
 		for (var i = 0; i < this.tabData.length; i++)
 		{
-			// Add a spacer to the flag container
-			$j(document.createElement("span"))
-				.addClass("et2_flagspacer")
-				.text("-")
-				.appendTo(this.flagContainer);
-
 			var entry = this.tabData[i];
 
 			entry.flagDiv = $j(document.createElement("span"))
 				.addClass("et2_tabflag")
 				.text(entry.label)
-				.appendTo(this.flagContainer);
+				.appendTo(this.flagContainer)
+				.click({"tabs": this, "idx": i}, function(e) {
+					e.data.tabs.setActiveTab(e.data.idx);
+				});
 
 			entry.contentDiv = $j(document.createElement("div"))
 				.addClass("et2_tabcntr")
@@ -151,6 +140,22 @@ var et2_tabbox = et2_DOMWidget.extend({
 			// Let the widget appear on its corresponding page
 			entry.widget.onSetParent();
 		}
+
+		this.setActiveTab(0);
+	},
+
+	setActiveTab: function(_idx) {
+		console.log(_idx);
+		// Remove the "active" flag from all tabs-flags
+		$j(".et2_tabflag", this.flagContainer).removeClass("active");
+
+		// Hide all tab containers
+		this.tabContainer.children().hide();
+
+		// Set the tab flag with the given index active and show the corresponding
+		// container
+		this.flagContainer.children(":eq(" + _idx + ")").addClass("active");
+		this.tabContainer.children(":eq(" + _idx + ")").show();
 	},
 
 	getDOMNode: function(_sender) {

etemplate/js/test/test.css

@@ -6,7 +6,7 @@
 
 /* Stuff for the standalone test webpage */
 
-body {
+body, table, td {
 	font-family: Lucida Grande, sans-serif;
 	font-size: 10pt;
 }
@@ -140,21 +140,6 @@ button.et2_button:focus {
 	outline: none;
 }
 
-.et2_tabflag {
-	display: inline-block;
-	margin-right: 5px;
-	height: 20px;
-	padding: 5px;
-	cursor: pointer;
-	border-width: 1px 1px 0 1px;
-	border-style: solid;
-	border-color: silver;
-}
-
-.et2_tabflag.active {
-	border-bottom: 1px solid white;
-}
-
 .et2_textbox {
 	resize: none;
 }
@@ -177,5 +162,55 @@ button.et2_button:focus {
 	color: black;
 }
 
+/**
+ * Tabs widget
+ */
+
+.et2_tabflag {
+	display: inline-block;
+	margin-right: 5px;
+	padding: 5px;
+	cursor: pointer;
+	border: 1px solid silver;
+
+	background-color: #E0E0E0;
+	background-image: url(gfx/gradient01.png);
+	background-position: center;
+	background-repeat: repeat-x;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.et2_tabflag:hover {
+	color: #050505;
+	border: 1px solid gray;
+	background-color: #D0D0EE;
+}
+
+.et2_tabflag:active {
+	background-image: url(gfx/gradient02.png);
+	background-color: #D0D0E0;
+}
+
+.et2_tabs {
+	border-width: 0px 1px 1px 1px;
+	border-style: solid;
+	border-color: silver;
+	padding: 5px;
+}
+
+.et2_tabflag.active {
+	border-bottom: 1px solid white;
+	background-color: white;
+	background-image: none;
+}
+
+.et2_tabheader {
+	background-image: url(gfx/tab_header_bg.png);
+	background-position: bottom;
+	background-repeat: repeat-x;
+}
 
 

etemplate/js/test/test_xml.html

@@ -26,7 +26,7 @@
 
 		<script src="../etemplate2.js"></script>
 
-		<!--<script src="../et2_tabs.js"></script>-->
+		<script src="../et2_tabs.js"></script>
 		<script src="../lib/tooltip.js"></script>
 		<script src="../../../phpgwapi/js/jsapi/jsapi.js"></script>