restructuring the test folder for tabs/slideshow

Author: tipiirai

test/tabs/horizontal.html test/tabs/accordion-horizontal.htmtest/tabs/horizontal.html renamed to test/tabs/accordion-horizontal.htm

@@ -1,46 +1,33 @@
 
-<script src="../../../jquery-1.3.2.js"></script>
-<script src="../tools.tabs.js"></script>
-<link rel="stylesheet" type="text/css" href="horizontal.css"/> 
-
-
-<script>
-$(function() {
-		
-	$("#accordion").tabs("#accordion div", {
-		tabs: 'img', 
-		effect: 'horizontal'
-	});
-	
-});
-</script>
-
+<script src="../js/jquery-1.4.2.js"></script>
+<script src="../../src/tabs/tabs.js"></script>
+<link rel="stylesheet" type="text/css" href="css/horizontal.css"/> 
 
 <!-- accordion root -->
 <div id="accordion">
 
 	<!-- accordion header #1 -->
-	<img src="${cdn}/img/title/streaminge.png" />
+	<div class="blok"></div>
 
-	<div style="width:200px; display:block">
+	<div class="pane" style="width:200px; display:block">
 		<h3>First pane</h3>
 		<p>
 			Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
 		</p>
 	</div>
 
-	<img src="${cdn}/img/title/flash.png" />
+	<div class="blok"></div>
 
-	<div>
+	<div class="pane">
 		<h3>Second pane</h3>
 		<p>
 			Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. 
 		</p>
 	</div>
 
-	<img src="${cdn}/img/title/streaming.png" />
+	<div class="blok"></div>
 
-	<div>
+	<div class="pane">
 		<h3>Third pane</h3>
 		<p>
 			Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
@@ -49,3 +36,7 @@ <h3>Third pane</h3>
 
 </div>
 
+
+<script>		
+$("#accordion").tabs(".pane", { tabs: '.blok',  effect: 'horizontal'});
+</script>

test/tabs/ajax.html

@@ -1,49 +1,43 @@
 
+
 /* root element for accordion. decorated with rounded borders and gradient background image */
 #accordion {
-	background:#FFFFFF url(/img/global/gradient/h150.png) repeat scroll 0;
 	height:80px;
 	padding:10px 0 10px 20px;
 	width:560px;
 	border:1px solid #ddd;
 }
 
-/* accordion header */
-#accordion img {
+
+.blok {
+	background-color:#234;
+	width:50px;
+	height:50px;
 	float:left;
 	margin-right:10px;
 	cursor:pointer;
-	opacity:0.5;
-	filter: alpha(opacity=50);
-}
-
-/* currently active header */
-#accordion img.current {
-	cursor:default;
-	opacity:1;
-	filter: alpha(opacity=100);
 }
 
 /* 
 	accordion pane. should initially have zero width and display:none.
 	the first pane should override these with inline style
 */
-#accordion div {
+.pane {
 	width:0px;
 	float:left;	
 	display:none;		
 	margin-right:10px;
 }
 
 /* content inside a pane should have fixed width */
-#accordion div h3 {
+.pane h3 {
 	color:#444;
 	margin:0 0 -10px 0;
 	width:190px;
 	font-size:15px;	
 }
 
-#accordion div p {	
+.pane p {	
 	font-size:11px;
 	width:190px;
 }

test/tabs/horizontal.css test/tabs/css/horizontal.csstest/tabs/horizontal.css renamed to test/tabs/css/horizontal.css

@@ -1,22 +1,29 @@
 
+body {
+	margin:100px auto;
+	font-family:sans-serif;
+	width:800px;
+	font-size:12px;
+}
+
 /* root element for tabs  */
-.css-tabs {  
+.tabs {  
 	margin:0 !important; 
 	padding:0;
 	height:28px;
 	border-bottom:1px solid #666;	 	
 }
 
 /* single tab */
-.css-tabs li {  
+.tabs li {  
 	float:left;	 
 	padding:0; 
 	margin:0;  
 	list-style-type:none;	
 }
 
 /* link inside the tab. uses a background image */
-.css-tabs a { 
+.tabs a { 
 	float:left;
 	display:block;
 	padding:5px 30px;	
@@ -32,13 +39,13 @@
 	-moz-border-radius:4px 4px 0 0;
 }
 
-.css-tabs a:hover {
+.tabs a:hover {
 	background-color:#F7F7F7;
 	color:#333;
 }
 
 /* selected tab */
-.css-tabs a.current {
+.tabs a.current {
 	background-color:#ddd;
 	border-bottom:2px solid #ddd;	
 	color:#000;	

test/tabs/tabs.css test/tabs/css/tabs.csstest/tabs/tabs.css renamed to test/tabs/css/tabs.css

@@ -1,28 +1,20 @@
 
 <script src="../js/jquery-1.4.2.js"></script>
 <script src="../../src/tabs/tabs.js"></script>
-<link rel="stylesheet" type="text/css" href="../tabs/tabs.css"/> 
+<link rel="stylesheet" type="text/css" href="css/tabs.css"/> 
 
-<style>
-body {
-	margin:100px;
-	font-family:sans-serif;
-	width:800px;
-	font-size:12px;
-}
-</style>
 
 <!-- tabs -->
-<ul class="css-tabs">
+<ul class="tabs">
 	<li><a href="#1">Tab 1</a></li>
 	<li><a href="#2">Second tab</a></li>
 	<li><a href="#3">A ultra long third tab</a></li>
 </ul>
 
 <!-- panes -->
-<div class="css-panes">
+<div class="panes">
 
-	<div style="display:block">
+	<div class="pane" style="display:block">
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
 		</p>
@@ -32,7 +24,7 @@
 		</p>			
 	</div>
 
-	<div>
+	<div class="pane">
 		<p>
 			Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
 		</p> 
@@ -41,7 +33,7 @@
 		</p>
 	</div>
 
-	<div>
+	<div class="pane">
 		<p>
 			Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 		</p>
@@ -54,7 +46,7 @@
 
 
 <script>
-$(".css-tabs").tabs(".css-panes > div");
+$(".tabs").tabs(".pane");
 </script>