Update demo page

vdw · vdw · commit 2f020ae61ee3 · 2013-11-13T22:09:02.000+02:00
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>Tabslet jquery plugin | Yet another plugin for tabs</title>
+	<title>Tabslet jQuery plugin | Yet another plugin for tabs</title>
 	<meta name="description" content="Yet another plugin for tabs">
 
 	<!-- STYLES -->
@@ -56,7 +56,7 @@ <h2>A jQuery plugin for tabs</h2>
 			<article>
 				<h2>
 					Tabslet is yet another jQuery plugin for tabs, is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.10.1, 2.0.2. and
-					supports <a class="anchorLink" href="#custom_event">custom events</a>, <a class="anchorLink" href="#rotation">rotation</a> and <a class="anchorLink" href="#animation">animation</a></h2>
+					supports <a class="anchorLink" href="#custom_event">custom events</a>, <a class="anchorLink" href="#rotation">rotation</a>, <a class="anchorLink" href="#animation">animation</a> and <a class="anchorLink" href="#controls">controls</a></h2>
 			</article>
 		</section>
 		<h3>Demonstration</h3>
@@ -138,6 +138,25 @@ <h2>Rotation</h2>
 					<div id='tab-3'><h3>It's alive!!!</h3></div>
 				</div>
 			</article>
+			<article id="controls">
+				<h2>Controls</h2>
+<pre data-language="javascript">
+$('.tabs').tabslet();
+</pre>
+				<div class='tabs tabs_controls'>
+					<a class="prev">previous</a>
+					<a class="next">next</a>
+					<span class='clear'></span>
+					<ul class='horizontal'>
+						<li><a href="#tab-1">information</a></li>
+						<li><a href="#tab-2">tab</a></li>
+						<li><a href="#tab-3">tab</a></li>
+					</ul>
+					<div id='tab-1'><h3>Tab 1</h3></div>
+					<div id='tab-2'><h3>Tab 2</h3></div>
+					<div id='tab-3'><h3>Tab 3</h3></div>
+				</div>
+			</article>
 			<!-- CONTENT BLOCK ends -->
 
 		</section>
@@ -214,7 +233,7 @@ <h2>The attribute "data-toggle"</h2>
 	<footer>
 		<!-- FOOTER CONTAINER-->
 		<div class="footer_wrapper">
-			<p>Built by <a href="https://github.com/vdw">vdw</a> aka <a href="http://gr.linkedin.com/in/dkrestos/" target="_blank">Dimitris Krestos</a></p><p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a></p>
+			<p>Built by <a href="https://github.com/vdw">vdw</a> aka <a href="http://gr.linkedin.com/in/dkrestos/" target="_blank">Dimitris Krestos</a><br />Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a></p>
 		</div>
 		<!-- FOOTER CONTAINER ends -->
 	</footer>
diff --git a/javascripts/initializers.js b/javascripts/initializers.js
@@ -22,6 +22,11 @@ $(document).ready(function() {
 		delay: 6000
 	});
 
+	$('.tabs_controls').tabslet({
+		autorotate: true,
+		delay: 6000
+	});
+
 	$('.before_event').tabslet();
 	$('.before_event').on("_before", function() {
 		alert('This alert comes before the tab change!')
diff --git a/javascripts/vendor/jquery.tabslet.min.js b/javascripts/vendor/jquery.tabslet.min.js
@@ -22,4 +22,4 @@
 
   */
 
-(function($,window,undefined){"use strict";$.fn.tabslet=function(options){var defaults={mouseevent:"click",attribute:"href",animation:false,autorotate:false,delay:6e3,active:1};var options=$.extend(defaults,options);$(this).each(function(){function next(){i=++i%elements.length;options.mouseevent=="hover"?elements.eq(i).trigger("mouseover"):elements.eq(i).click();var e=setTimeout(next,options.delay);$this.mouseover(function(){clearTimeout(e)})}var $this=$(this);$this.find("> div").hide();$this.find("> div").eq(options.active-1).show();$this.find("> ul li").eq(options.active-1).addClass("active");var fn=eval(function(){$(this).trigger("_before");$this.find("> ul li").removeClass("active");$(this).addClass("active");$this.find("> div").hide();var e=$(this).find("a").attr(options.attribute);if(options.animation){$this.find(e).animate({opacity:"show"},"slow",function(){$(this).trigger("_after")})}else{$this.find(e).show();$(this).trigger("_after")}return false});var init=eval("$this.find('> ul li')."+options.mouseevent+"(fn)");init;var elements=$this.find("> ul li"),i=options.active-2;if(options.autorotate){setTimeout(next,0)}})};$(document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})})(jQuery)
+(function($,window,undefined){$.fn.tabslet=function(options){var defaults={mouseevent:"click",attribute:"href",animation:false,autorotate:false,delay:6000,active:1,controls:{prev:".prev",next:".next"}};var options=$.extend(defaults,options);$(this).each(function(){var $this=$(this);$this.find("> div").hide();$this.find("> div").eq(options.active-1).show();$this.find("> ul li").eq(options.active-1).addClass("active");var fn=eval(function(){$(this).trigger("_before");$this.find("> ul li").removeClass("active");$(this).addClass("active");$this.find("> div").hide();var currentTab=$(this).find("a").attr(options.attribute);if(options.animation){$this.find(currentTab).animate({opacity:"show"},"slow",function(){$(this).trigger("_after")})}else{$this.find(currentTab).show();$(this).trigger("_after")}return false});var init=eval("$this.find('> ul li')."+options.mouseevent+"(fn)");init;var elements=$this.find("> ul li"),i=options.active-1;function forward(){i=++i%elements.length;options.mouseevent=="hover"?elements.eq(i).trigger("mouseover"):elements.eq(i).click();var t=setTimeout(forward,options.delay);$this.mouseover(function(){clearTimeout(t)})}if(options.autorotate){setTimeout(forward,0)}function move(direction){if(direction=="forward"){i=++i%elements.length}if(direction=="backward"){i=--i%elements.length}elements.eq(i).click()}$(this).find(options.controls.next).click(function(){move("forward")});$(this).find(options.controls.prev).click(function(){move("backward")})})};$(document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})})(jQuery);
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -31,6 +31,16 @@ H2 {
 	font-weight: 300;
 }
 
+/* Clear fix */
+.clear {
+	clear: both;
+	display: block;
+	float: none;
+	font-size: 1px;
+	height: 0px;
+	line-height: 0
+}
+
 /**
  * HEADER
  * Your header rules
@@ -257,4 +267,19 @@ FOOTER {
 .screenshot {
 	position: absolute;
 	clip: rect(0 0 0 0);
+}
+
+.prev,
+.next {
+	background: white !important;
+	color: #a0cac0 !important;
+	float: left;
+	margin-right: 10px;
+	margin-bottom: 10px;
+}
+
+.prev:hover,
+.next:hover {
+	background: #a0cac0 !important;
+	color: white !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,4 @@`
`22`	`22`
`23`	`23`	`*/`
`24`	`24`
`25`		-(function($,window,undefined){"use strict";$.fn.tabslet=function(options){var defaults={mouseevent:"click",attribute:"href",animation:false,autorotate:false,delay:6e3,active:1};var options=$.extend(defaults,options);$(this).each(function(){function next(){i=++i%elements.length;options.mouseevent=="hover"?elements.eq(i).trigger("mouseover"):elements.eq(i).click();var e=setTimeout(next,options.delay);$this.mouseover(function(){clearTimeout(e)})}var $this=$(this);$this.find("> div").hide();$this.find("> div").eq(options.active-1).show();$this.find("> ul li").eq(options.active-1).addClass("active");var fn=eval(function(){$(this).trigger("_before");$this.find("> ul li").removeClass("active");$(this).addClass("active");$this.find("> div").hide();var e=$(this).find("a").attr(options.attribute);if(options.animation){$this.find(e).animate({opacity:"show"},"slow",function(){$(this).trigger("_after")})}else{$this.find(e).show();$(this).trigger("_after")}return false});var init=eval("$this.find('> ul li')."+options.mouseevent+"(fn)");init;var elements=$this.find("> ul li"),i=options.active-2;if(options.autorotate){setTimeout(next,0)}})};$(document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})})(jQuery)
	`25`	+(function($,window,undefined){$.fn.tabslet=function(options){var defaults={mouseevent:"click",attribute:"href",animation:false,autorotate:false,delay:6000,active:1,controls:{prev:".prev",next:".next"}};var options=$.extend(defaults,options);$(this).each(function(){var $this=$(this);$this.find("> div").hide();$this.find("> div").eq(options.active-1).show();$this.find("> ul li").eq(options.active-1).addClass("active");var fn=eval(function(){$(this).trigger("_before");$this.find("> ul li").removeClass("active");$(this).addClass("active");$this.find("> div").hide();var currentTab=$(this).find("a").attr(options.attribute);if(options.animation){$this.find(currentTab).animate({opacity:"show"},"slow",function(){$(this).trigger("_after")})}else{$this.find(currentTab).show();$(this).trigger("_after")}return false});var init=eval("$this.find('> ul li')."+options.mouseevent+"(fn)");init;var elements=$this.find("> ul li"),i=options.active-1;function forward(){i=++i%elements.length;options.mouseevent=="hover"?elements.eq(i).trigger("mouseover"):elements.eq(i).click();var t=setTimeout(forward,options.delay);$this.mouseover(function(){clearTimeout(t)})}if(options.autorotate){setTimeout(forward,0)}function move(direction){if(direction=="forward"){i=++i%elements.length}if(direction=="backward"){i=--i%elements.length}elements.eq(i).click()}$(this).find(options.controls.next).click(function(){move("forward")});$(this).find(options.controls.prev).click(function(){move("backward")})})};$(document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})})(jQuery);