Skip to content
Browse files

config option for initial effect on tabs

  • Loading branch information...
1 parent 5f5eb0f commit 46b8662c14889779ee30b68db90903369db525c2 @bradrobertson bradrobertson committed Oct 30, 2011
Showing with 72 additions and 8 deletions.
  1. +1 −0 CHANGELOG.md
  2. +12 −7 src/tabs/tabs.js
  3. +58 −0 test/tabs/effect.html
  4. +1 −1 test/tabs/index.html
View
1 CHANGELOG.md
@@ -4,6 +4,7 @@
- Fix dateinput selectors bug[#541](https://github.com/jquerytools/jquerytools/issues/541)
- Fix history bug in scrollable navigator[#542](https://github.com/jquerytools/jquerytools/issues/542)
- Fix apple effect on firefox 3.6 [#310](https://github.com/jquerytools/jquerytools/issues/310)
+ - Initial effect on tabs is now configurable [#531](https://github.com/jquerytools/jquerytools/issues/531)
# 1.2.6
### Sept 15, 2011
View
19 src/tabs/tabs.js
@@ -22,6 +22,7 @@
onBeforeClick: null,
onClick: null,
effect: 'default',
+ initialEffect: false, // whether or not to show effect in first init of tabs
initialIndex: 0,
event: 'click',
rotate: false,
@@ -141,11 +142,11 @@
function Tabs(root, paneSelector, conf) {
- var self = this,
- trigger = root.add(this),
- tabs = root.find(conf.tabs),
- panes = paneSelector.jquery ? paneSelector : root.children(paneSelector),
- current;
+ var self = this,
+ trigger = root.add(this),
+ tabs = root.find(conf.tabs),
+ panes = paneSelector.jquery ? paneSelector : root.children(paneSelector),
+ current;
// make sure tabs and panes are found
@@ -158,7 +159,8 @@
$.extend(this, {
click: function(i, e) {
- var tab = tabs.eq(i);
+ var tab = tabs.eq(i),
+ firstRender = !root.data('tabs');
if (typeof i == 'string' && i.replace("#", "")) {
tab = tabs.filter("[href*=" + i.replace("#", "") + "]");
@@ -185,9 +187,12 @@
e.type = "onBeforeClick";
trigger.trigger(e, [i]);
if (e.isDefaultPrevented()) { return; }
+
+ // if firstRender, only run effect if initialEffect is set, otherwise default
+ var effect = firstRender ? conf.initialEffect && conf.effect || 'default' : conf.effect;
// call the effect
- effects[conf.effect].call(self, i, function() {
+ effects[effect].call(self, i, function() {
current = i;
// onClick callback
e.type = "onClick";
View
58 test/tabs/effect.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <script src="../js/jquery-1.6.2.js"></script>
+ <script src="../../src/tabs/tabs.js"></script>
+ <link rel="stylesheet" type="text/css" href="css/tabs.css"/>
+ </head>
+
+ <body>
+ <!-- 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="panes">
+
+ <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>
+
+ <p>
+ Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.
+ </p>
+ </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>
+ <p>
+ Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
+ </p>
+ </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>
+
+ <p>
+ In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.
+ </p>
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ $(function(){
+ $(".tabs").tabs(".pane", {effect: 'fade'});
+ });
+ </script>
+
+ </body>
+</html>
View
2 test/tabs/index.html
@@ -1,5 +1,5 @@
-<script src="../js/jquery-1.4.2.js"></script>
+<script src="../js/jquery-1.6.2.js"></script>
<script src="../../src/tabs/tabs.js"></script>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>

0 comments on commit 46b8662

Please sign in to comment.
Something went wrong with that request. Please try again.