SVN: livecd/kde4/html/template.html

Wed Feb 11 17:03:19 CET 2009

Author: vip
Date: Wed Feb 11 17:03:18 2009
New Revision: 10119

Modified:
   livecd/kde4/html/template.html
Log:
- better approach to handle tabs


Modified: livecd/kde4/html/template.html
==============================================================================

--- livecd/kde4/html/template.html	(original)
+++ livecd/kde4/html/template.html	Wed Feb 11 17:03:18 2009
@@ -14,33 +14,56 @@
 	 * LGPL, Piotr Budny vip (at) pld-linux.org 2008 
 	 */
 	
-	function changeCurrent(current)
+	var tabs =
 	{
-		var content = document.getElementById("feature");
-		var tabs = document.getElementById("feature_menu");
-		var elements = tabs.getElementsByTagName("a");
+		init: function()
+		{
+			var tabs = document.getElementById("feature_menu");
+			var elements = tabs.getElementsByTagName('a');
 
-		for( var i = 0; i < elements.length; i++ )
+			for (i = 0; i < elements.length; i++)
+			{
+				elements[i].onclick = this.changeCurrent;
+			}
+		},
+
+		changeCurrent: function()
 		{
+			var tabs = document.getElementById("feature_menu");
+			var elements = tabs.getElementsByTagName("a");
+		 
+			for( var i = 0; i < elements.length; i++ )
+			{
 				var element = elements[i];
-
 				element.setAttribute("class", "");
 				element.setAttribute("className", "");
-		}
+			 }
+		 
+			this.setAttribute("class", "current");
+			this.setAttribute("className", "current");
 
-		current.setAttribute("class", "current");
-		current.setAttribute("className", "current");
-		
+			loadContent(this.getAttribute("content"));
+			return;
+		}
+	};
+	
+	function loadContent(id)
+	{
+		var content = document.getElementById("feature");
 		try{
-			content.innerHTML = document.getElementById("feature" + current.hash.replace("#", "-")).innerHTML;			
-		}catch	(e){}
-
-		return;
+			content.innerHTML = document.getElementById(id).innerHTML;
+		}catch (e){}
+	}
+	
+	function initTabs()
+	{
+		tabs.init();
+		loadContent("feature-1");
 	}
 	-->
 	</script>
 </head>
-<body onload='changeCurrent(document.getElementById("initial"));'>
+<body onload='initTabs()'>
 	<div class="wrap background">
 		<div id="search">
 			<form action="">
@@ -62,9 +85,9 @@
 		</div>
 		
 		<ul id="feature_menu">
-			<li><a id="initial" class="current" onclick="changeCurrent(this)" href="#1">DID YOU KNOW...</a></li>
-			<li><a href="#2" onclick="changeCurrent(this)">ON THIS DAY</a></li>
-			<li><a href="#3" onclick="changeCurrent(this)">FEATURED CONTENT</a></li>
+			<li><a class="current" href="#" content="feature-1">DID YOU KNOW...</a></li>
+			<li><a href="#" content="feature-2">ON THIS DAY</a></li>
+			<li><a href="#" content="feature-3">FEATURED CONTENT</a></li>
 		</ul>
 			
 		<div id="feature">
