1 | /**
|
---|
2 | * @license
|
---|
3 | * jQuery Tools 1.2.5 Tabs- The basics of UI design.
|
---|
4 | *
|
---|
5 | * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
|
---|
6 | *
|
---|
7 | * http://flowplayer.org/tools/tabs/
|
---|
8 | *
|
---|
9 | * Since: November 2008
|
---|
10 | * Date: Wed Sep 22 06:02:10 2010 +0000
|
---|
11 | */
|
---|
12 | (function($) {
|
---|
13 |
|
---|
14 | // static constructs
|
---|
15 | $.tools = $.tools || {version: '1.2.5'};
|
---|
16 |
|
---|
17 | $.tools.tabs = {
|
---|
18 |
|
---|
19 | conf: {
|
---|
20 | tabs: 'a',
|
---|
21 | current: 'current',
|
---|
22 | onBeforeClick: null,
|
---|
23 | onClick: null,
|
---|
24 | effect: 'default',
|
---|
25 | initialIndex: 0,
|
---|
26 | event: 'click',
|
---|
27 | rotate: false,
|
---|
28 |
|
---|
29 | // 1.2
|
---|
30 | history: false
|
---|
31 | },
|
---|
32 |
|
---|
33 | addEffect: function(name, fn) {
|
---|
34 | effects[name] = fn;
|
---|
35 | }
|
---|
36 |
|
---|
37 | };
|
---|
38 |
|
---|
39 | var effects = {
|
---|
40 |
|
---|
41 | // simple "toggle" effect
|
---|
42 | 'default': function(i, done) {
|
---|
43 | this.getPanes().hide().eq(i).show();
|
---|
44 | done.call();
|
---|
45 | },
|
---|
46 |
|
---|
47 | /*
|
---|
48 | configuration:
|
---|
49 | - fadeOutSpeed (positive value does "crossfading")
|
---|
50 | - fadeInSpeed
|
---|
51 | */
|
---|
52 | fade: function(i, done) {
|
---|
53 |
|
---|
54 | var conf = this.getConf(),
|
---|
55 | speed = conf.fadeOutSpeed,
|
---|
56 | panes = this.getPanes();
|
---|
57 |
|
---|
58 | if (speed) {
|
---|
59 | panes.fadeOut(speed);
|
---|
60 | } else {
|
---|
61 | panes.hide();
|
---|
62 | }
|
---|
63 |
|
---|
64 | panes.eq(i).fadeIn(conf.fadeInSpeed, done);
|
---|
65 | },
|
---|
66 |
|
---|
67 | // for basic accordions
|
---|
68 | slide: function(i, done) {
|
---|
69 | this.getPanes().slideUp(200);
|
---|
70 | this.getPanes().eq(i).slideDown(400, done);
|
---|
71 | },
|
---|
72 |
|
---|
73 | /**
|
---|
74 | * AJAX effect
|
---|
75 | */
|
---|
76 | ajax: function(i, done) {
|
---|
77 | this.getPanes().eq(0).load(this.getTabs().eq(i).attr("href"), done);
|
---|
78 | }
|
---|
79 | };
|
---|
80 |
|
---|
81 | var w;
|
---|
82 |
|
---|
83 | /**
|
---|
84 | * Horizontal accordion
|
---|
85 | *
|
---|
86 | * @deprecated will be replaced with a more robust implementation
|
---|
87 | */
|
---|
88 | $.tools.tabs.addEffect("horizontal", function(i, done) {
|
---|
89 |
|
---|
90 | // store original width of a pane into memory
|
---|
91 | if (!w) { w = this.getPanes().eq(0).width(); }
|
---|
92 |
|
---|
93 | // set current pane's width to zero
|
---|
94 | this.getCurrentPane().animate({width: 0}, function() { $(this).hide(); });
|
---|
95 |
|
---|
96 | // grow opened pane to it's original width
|
---|
97 | this.getPanes().eq(i).animate({width: w}, function() {
|
---|
98 | $(this).show();
|
---|
99 | done.call();
|
---|
100 | });
|
---|
101 |
|
---|
102 | });
|
---|
103 |
|
---|
104 |
|
---|
105 | function Tabs(root, paneSelector, conf) {
|
---|
106 |
|
---|
107 | var self = this,
|
---|
108 | trigger = root.add(this),
|
---|
109 | tabs = root.find(conf.tabs),
|
---|
110 | panes = paneSelector.jquery ? paneSelector : root.children(paneSelector),
|
---|
111 | current;
|
---|
112 |
|
---|
113 |
|
---|
114 | // make sure tabs and panes are found
|
---|
115 | if (!tabs.length) { tabs = root.children(); }
|
---|
116 | if (!panes.length) { panes = root.parent().find(paneSelector); }
|
---|
117 | if (!panes.length) { panes = $(paneSelector); }
|
---|
118 |
|
---|
119 |
|
---|
120 | // public methods
|
---|
121 | $.extend(this, {
|
---|
122 | click: function(i, e) {
|
---|
123 |
|
---|
124 | var tab = tabs.eq(i);
|
---|
125 |
|
---|
126 | if (typeof i == 'string' && i.replace("#", "")) {
|
---|
127 | tab = tabs.filter("[href*=" + i.replace("#", "") + "]");
|
---|
128 | i = Math.max(tabs.index(tab), 0);
|
---|
129 | }
|
---|
130 |
|
---|
131 | if (conf.rotate) {
|
---|
132 | var last = tabs.length -1;
|
---|
133 | if (i < 0) { return self.click(last, e); }
|
---|
134 | if (i > last) { return self.click(0, e); }
|
---|
135 | }
|
---|
136 |
|
---|
137 | if (!tab.length) {
|
---|
138 | if (current >= 0) { return self; }
|
---|
139 | i = conf.initialIndex;
|
---|
140 | tab = tabs.eq(i);
|
---|
141 | }
|
---|
142 |
|
---|
143 | // current tab is being clicked
|
---|
144 | if (i === current) { return self; }
|
---|
145 |
|
---|
146 | // possibility to cancel click action
|
---|
147 | e = e || $.Event();
|
---|
148 | e.type = "onBeforeClick";
|
---|
149 | trigger.trigger(e, [i]);
|
---|
150 | if (e.isDefaultPrevented()) { return; }
|
---|
151 |
|
---|
152 | // call the effect
|
---|
153 | effects[conf.effect].call(self, i, function() {
|
---|
154 |
|
---|
155 | // onClick callback
|
---|
156 | e.type = "onClick";
|
---|
157 | trigger.trigger(e, [i]);
|
---|
158 | });
|
---|
159 |
|
---|
160 | // default behaviour
|
---|
161 | current = i;
|
---|
162 | tabs.removeClass(conf.current);
|
---|
163 | tab.addClass(conf.current);
|
---|
164 |
|
---|
165 | return self;
|
---|
166 | },
|
---|
167 |
|
---|
168 | getConf: function() {
|
---|
169 | return conf;
|
---|
170 | },
|
---|
171 |
|
---|
172 | getTabs: function() {
|
---|
173 | return tabs;
|
---|
174 | },
|
---|
175 |
|
---|
176 | getPanes: function() {
|
---|
177 | return panes;
|
---|
178 | },
|
---|
179 |
|
---|
180 | getCurrentPane: function() {
|
---|
181 | return panes.eq(current);
|
---|
182 | },
|
---|
183 |
|
---|
184 | getCurrentTab: function() {
|
---|
185 | return tabs.eq(current);
|
---|
186 | },
|
---|
187 |
|
---|
188 | getIndex: function() {
|
---|
189 | return current;
|
---|
190 | },
|
---|
191 |
|
---|
192 | next: function() {
|
---|
193 | return self.click(current + 1);
|
---|
194 | },
|
---|
195 |
|
---|
196 | prev: function() {
|
---|
197 | return self.click(current - 1);
|
---|
198 | },
|
---|
199 |
|
---|
200 | destroy: function() {
|
---|
201 | tabs.unbind(conf.event).removeClass(conf.current);
|
---|
202 | panes.find("a[href^=#]").unbind("click.T");
|
---|
203 | return self;
|
---|
204 | }
|
---|
205 |
|
---|
206 | });
|
---|
207 |
|
---|
208 | // callbacks
|
---|
209 | $.each("onBeforeClick,onClick".split(","), function(i, name) {
|
---|
210 |
|
---|
211 | // configuration
|
---|
212 | if ($.isFunction(conf[name])) {
|
---|
213 | $(self).bind(name, conf[name]);
|
---|
214 | }
|
---|
215 |
|
---|
216 | // API
|
---|
217 | self[name] = function(fn) {
|
---|
218 | if (fn) { $(self).bind(name, fn); }
|
---|
219 | return self;
|
---|
220 | };
|
---|
221 | });
|
---|
222 |
|
---|
223 |
|
---|
224 | if (conf.history && $.fn.history) {
|
---|
225 | $.tools.history.init(tabs);
|
---|
226 | conf.event = 'history';
|
---|
227 | }
|
---|
228 |
|
---|
229 | // setup click actions for each tab
|
---|
230 | tabs.each(function(i) {
|
---|
231 | $(this).bind(conf.event, function(e) {
|
---|
232 | self.click(i, e);
|
---|
233 | return e.preventDefault();
|
---|
234 | });
|
---|
235 | });
|
---|
236 |
|
---|
237 | // cross tab anchor link
|
---|
238 | panes.find("a[href^=#]").bind("click.T", function(e) {
|
---|
239 | self.click($(this).attr("href"), e);
|
---|
240 | });
|
---|
241 |
|
---|
242 | // open initial tab
|
---|
243 | if (location.hash && conf.tabs == "a" && root.find("[href=" +location.hash+ "]").length) {
|
---|
244 | self.click(location.hash);
|
---|
245 |
|
---|
246 | } else {
|
---|
247 | if (conf.initialIndex === 0 || conf.initialIndex > 0) {
|
---|
248 | self.click(conf.initialIndex);
|
---|
249 | }
|
---|
250 | }
|
---|
251 |
|
---|
252 | }
|
---|
253 |
|
---|
254 |
|
---|
255 | // jQuery plugin implementation
|
---|
256 | $.fn.tabs = function(paneSelector, conf) {
|
---|
257 |
|
---|
258 | // return existing instance
|
---|
259 | var el = this.data("tabs");
|
---|
260 | if (el) {
|
---|
261 | el.destroy();
|
---|
262 | this.removeData("tabs");
|
---|
263 | }
|
---|
264 |
|
---|
265 | if ($.isFunction(conf)) {
|
---|
266 | conf = {onBeforeClick: conf};
|
---|
267 | }
|
---|
268 |
|
---|
269 | // setup conf
|
---|
270 | conf = $.extend({}, $.tools.tabs.conf, conf);
|
---|
271 |
|
---|
272 |
|
---|
273 | this.each(function() {
|
---|
274 | el = new Tabs($(this), paneSelector, conf);
|
---|
275 | $(this).data("tabs", el);
|
---|
276 | });
|
---|
277 |
|
---|
278 | return conf.api ? el: this;
|
---|
279 | };
|
---|
280 |
|
---|
281 | }) (jQuery);
|
---|
282 |
|
---|
283 |
|
---|