[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery UI Tabs 1.7.2

   3   *

   4   * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)

   5   * Dual licensed under the MIT (MIT-LICENSE.txt)

   6   * and GPL (GPL-LICENSE.txt) licenses.

   7   *

   8   * http://docs.jquery.com/UI/Tabs

   9   *

  10   * Depends:

  11   *    ui.core.js

  12   */
  13  (function($) {
  14  
  15  $.widget("ui.tabs", {
  16  
  17      _init: function() {
  18          if (this.options.deselectable !== undefined) {
  19              this.options.collapsible = this.options.deselectable;
  20          }
  21          this._tabify(true);
  22      },
  23  
  24      _setData: function(key, value) {
  25          if (key == 'selected') {
  26              if (this.options.collapsible && value == this.options.selected) {
  27                  return;
  28              }
  29              this.select(value);
  30          }
  31          else {
  32              this.options[key] = value;
  33              if (key == 'deselectable') {
  34                  this.options.collapsible = value;
  35              }
  36              this._tabify();
  37          }
  38      },
  39  
  40      _tabId: function(a) {
  41          return a.title && a.title.replace(/\s/g, '_').replace(/[^A-Za-z0-9\-_:\.]/g, '') ||
  42              this.options.idPrefix + $.data(a);
  43      },
  44  
  45      _sanitizeSelector: function(hash) {
  46          return hash.replace(/:/g, '\\:'); // we need this because an id may contain a ":"

  47      },
  48  
  49      _cookie: function() {
  50          var cookie = this.cookie || (this.cookie = this.options.cookie.name || 'ui-tabs-' + $.data(this.list[0]));
  51          return $.cookie.apply(null, [cookie].concat($.makeArray(arguments)));
  52      },
  53  
  54      _ui: function(tab, panel) {
  55          return {
  56              tab: tab,
  57              panel: panel,
  58              index: this.anchors.index(tab)
  59          };
  60      },
  61  
  62      _cleanup: function() {
  63          // restore all former loading tabs labels

  64          this.lis.filter('.ui-state-processing').removeClass('ui-state-processing')
  65                  .find('span:data(label.tabs)')
  66                  .each(function() {
  67                      var el = $(this);
  68                      el.html(el.data('label.tabs')).removeData('label.tabs');
  69                  });
  70      },
  71  
  72      _tabify: function(init) {
  73  
  74          this.list = this.element.children('ul:first');
  75          this.lis = $('li:has(a[href])', this.list);
  76          this.anchors = this.lis.map(function() { return $('a', this)[0]; });
  77          this.panels = $([]);
  78  
  79          var self = this, o = this.options;
  80  
  81          var fragmentId = /^#.+/; // Safari 2 reports '#' for an empty hash

  82          this.anchors.each(function(i, a) {
  83              var href = $(a).attr('href');
  84  
  85              // For dynamically created HTML that contains a hash as href IE < 8 expands

  86              // such href to the full page url with hash and then misinterprets tab as ajax.

  87              // Same consideration applies for an added tab with a fragment identifier

  88              // since a[href=#fragment-identifier] does unexpectedly not match.

  89              // Thus normalize href attribute...

  90              var hrefBase = href.split('#')[0], baseEl;
  91              if (hrefBase && (hrefBase === location.toString().split('#')[0] ||
  92                      (baseEl = $('base')[0]) && hrefBase === baseEl.href)) {
  93                  href = a.hash;
  94                  a.href = href;
  95              }
  96  
  97              // inline tab

  98              if (fragmentId.test(href)) {
  99                  self.panels = self.panels.add(self._sanitizeSelector(href));
 100              }
 101  
 102              // remote tab

 103              else if (href != '#') { // prevent loading the page itself if href is just "#"
 104                  $.data(a, 'href.tabs', href); // required for restore on destroy

 105  
 106                  // TODO until #3808 is fixed strip fragment identifier from url

 107                  // (IE fails to load from such url)

 108                  $.data(a, 'load.tabs', href.replace(/#.*$/, '')); // mutable data

 109  
 110                  var id = self._tabId(a);
 111                  a.href = '#' + id;
 112                  var $panel = $('#' + id);
 113                  if (!$panel.length) {
 114                      $panel = $(o.panelTemplate).attr('id', id).addClass('ui-tabs-panel ui-widget-content ui-corner-bottom')
 115                          .insertAfter(self.panels[i - 1] || self.list);
 116                      $panel.data('destroy.tabs', true);
 117                  }
 118                  self.panels = self.panels.add($panel);
 119              }
 120  
 121              // invalid tab href

 122              else {
 123                  o.disabled.push(i);
 124              }
 125          });
 126  
 127          // initialization from scratch

 128          if (init) {
 129  
 130              // attach necessary classes for styling

 131              this.element.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all');
 132              this.list.addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
 133              this.lis.addClass('ui-state-default ui-corner-top');
 134              this.panels.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom');
 135  
 136              // Selected tab

 137              // use "selected" option or try to retrieve:

 138              // 1. from fragment identifier in url

 139              // 2. from cookie

 140              // 3. from selected class attribute on <li>

 141              if (o.selected === undefined) {
 142                  if (location.hash) {
 143                      this.anchors.each(function(i, a) {
 144                          if (a.hash == location.hash) {
 145                              o.selected = i;
 146                              return false; // break

 147                          }
 148                      });
 149                  }
 150                  if (typeof o.selected != 'number' && o.cookie) {
 151                      o.selected = parseInt(self._cookie(), 10);
 152                  }
 153                  if (typeof o.selected != 'number' && this.lis.filter('.ui-tabs-selected').length) {
 154                      o.selected = this.lis.index(this.lis.filter('.ui-tabs-selected'));
 155                  }
 156                  o.selected = o.selected || 0;
 157              }
 158              else if (o.selected === null) { // usage of null is deprecated, TODO remove in next release
 159                  o.selected = -1;
 160              }
 161  
 162              // sanity check - default to first tab...

 163              o.selected = ((o.selected >= 0 && this.anchors[o.selected]) || o.selected < 0) ? o.selected : 0;
 164  
 165              // Take disabling tabs via class attribute from HTML

 166              // into account and update option properly.

 167              // A selected tab cannot become disabled.

 168              o.disabled = $.unique(o.disabled.concat(
 169                  $.map(this.lis.filter('.ui-state-disabled'),
 170                      function(n, i) { return self.lis.index(n); } )
 171              )).sort();
 172  
 173              if ($.inArray(o.selected, o.disabled) != -1) {
 174                  o.disabled.splice($.inArray(o.selected, o.disabled), 1);
 175              }
 176  
 177              // highlight selected tab

 178              this.panels.addClass('ui-tabs-hide');
 179              this.lis.removeClass('ui-tabs-selected ui-state-active');
 180              if (o.selected >= 0 && this.anchors.length) { // check for length avoids error when initializing empty list
 181                  this.panels.eq(o.selected).removeClass('ui-tabs-hide');
 182                  this.lis.eq(o.selected).addClass('ui-tabs-selected ui-state-active');
 183  
 184                  // seems to be expected behavior that the show callback is fired

 185                  self.element.queue("tabs", function() {
 186                      self._trigger('show', null, self._ui(self.anchors[o.selected], self.panels[o.selected]));
 187                  });
 188                  
 189                  this.load(o.selected);
 190              }
 191  
 192              // clean up to avoid memory leaks in certain versions of IE 6

 193              $(window).bind('unload', function() {
 194                  self.lis.add(self.anchors).unbind('.tabs');
 195                  self.lis = self.anchors = self.panels = null;
 196              });
 197  
 198          }
 199          // update selected after add/remove

 200          else {
 201              o.selected = this.lis.index(this.lis.filter('.ui-tabs-selected'));
 202          }
 203  
 204          // update collapsible

 205          this.element[o.collapsible ? 'addClass' : 'removeClass']('ui-tabs-collapsible');
 206  
 207          // set or update cookie after init and add/remove respectively

 208          if (o.cookie) {
 209              this._cookie(o.selected, o.cookie);
 210          }
 211  
 212          // disable tabs

 213          for (var i = 0, li; (li = this.lis[i]); i++) {
 214              $(li)[$.inArray(i, o.disabled) != -1 &&
 215                  !$(li).hasClass('ui-tabs-selected') ? 'addClass' : 'removeClass']('ui-state-disabled');
 216          }
 217  
 218          // reset cache if switching from cached to not cached

 219          if (o.cache === false) {
 220              this.anchors.removeData('cache.tabs');
 221          }
 222  
 223          // remove all handlers before, tabify may run on existing tabs after add or option change

 224          this.lis.add(this.anchors).unbind('.tabs');
 225  
 226          if (o.event != 'mouseover') {
 227              var addState = function(state, el) {
 228                  if (el.is(':not(.ui-state-disabled)')) {
 229                      el.addClass('ui-state-' + state);
 230                  }
 231              };
 232              var removeState = function(state, el) {
 233                  el.removeClass('ui-state-' + state);
 234              };
 235              this.lis.bind('mouseover.tabs', function() {
 236                  addState('hover', $(this));
 237              });
 238              this.lis.bind('mouseout.tabs', function() {
 239                  removeState('hover', $(this));
 240              });
 241              this.anchors.bind('focus.tabs', function() {
 242                  addState('focus', $(this).closest('li'));
 243              });
 244              this.anchors.bind('blur.tabs', function() {
 245                  removeState('focus', $(this).closest('li'));
 246              });
 247          }
 248  
 249          // set up animations

 250          var hideFx, showFx;
 251          if (o.fx) {
 252              if ($.isArray(o.fx)) {
 253                  hideFx = o.fx[0];
 254                  showFx = o.fx[1];
 255              }
 256              else {
 257                  hideFx = showFx = o.fx;
 258              }
 259          }
 260  
 261          // Reset certain styles left over from animation

 262          // and prevent IE's ClearType bug...

 263  		function resetStyle($el, fx) {
 264              $el.css({ display: '' });
 265              if ($.browser.msie && fx.opacity) {
 266                  $el[0].style.removeAttribute('filter');
 267              }
 268          }
 269  
 270          // Show a tab...

 271          var showTab = showFx ?
 272              function(clicked, $show) {
 273                  $(clicked).closest('li').removeClass('ui-state-default').addClass('ui-tabs-selected ui-state-active');
 274                  $show.hide().removeClass('ui-tabs-hide') // avoid flicker that way
 275                      .animate(showFx, showFx.duration || 'normal', function() {
 276                          resetStyle($show, showFx);
 277                          self._trigger('show', null, self._ui(clicked, $show[0]));
 278                      });
 279              } :
 280              function(clicked, $show) {
 281                  $(clicked).closest('li').removeClass('ui-state-default').addClass('ui-tabs-selected ui-state-active');
 282                  $show.removeClass('ui-tabs-hide');
 283                  self._trigger('show', null, self._ui(clicked, $show[0]));
 284              };
 285  
 286          // Hide a tab, $show is optional...

 287          var hideTab = hideFx ?
 288              function(clicked, $hide) {
 289                  $hide.animate(hideFx, hideFx.duration || 'normal', function() {
 290                      self.lis.removeClass('ui-tabs-selected ui-state-active').addClass('ui-state-default');
 291                      $hide.addClass('ui-tabs-hide');
 292                      resetStyle($hide, hideFx);
 293                      self.element.dequeue("tabs");
 294                  });
 295              } :
 296              function(clicked, $hide, $show) {
 297                  self.lis.removeClass('ui-tabs-selected ui-state-active').addClass('ui-state-default');
 298                  $hide.addClass('ui-tabs-hide');
 299                  self.element.dequeue("tabs");
 300              };
 301  
 302          // attach tab event handler, unbind to avoid duplicates from former tabifying...

 303          this.anchors.bind(o.event + '.tabs', function() {
 304              var el = this, $li = $(this).closest('li'), $hide = self.panels.filter(':not(.ui-tabs-hide)'),
 305                      $show = $(self._sanitizeSelector(this.hash));
 306  
 307              // If tab is already selected and not collapsible or tab disabled or

 308              // or is already loading or click callback returns false stop here.

 309              // Check if click handler returns false last so that it is not executed

 310              // for a disabled or loading tab!

 311              if (($li.hasClass('ui-tabs-selected') && !o.collapsible) ||
 312                  $li.hasClass('ui-state-disabled') ||
 313                  $li.hasClass('ui-state-processing') ||
 314                  self._trigger('select', null, self._ui(this, $show[0])) === false) {
 315                  this.blur();
 316                  return false;
 317              }
 318  
 319              o.selected = self.anchors.index(this);
 320  
 321              self.abort();
 322  
 323              // if tab may be closed

 324              if (o.collapsible) {
 325                  if ($li.hasClass('ui-tabs-selected')) {
 326                      o.selected = -1;
 327  
 328                      if (o.cookie) {
 329                          self._cookie(o.selected, o.cookie);
 330                      }
 331  
 332                      self.element.queue("tabs", function() {
 333                          hideTab(el, $hide);
 334                      }).dequeue("tabs");
 335                      
 336                      this.blur();
 337                      return false;
 338                  }
 339                  else if (!$hide.length) {
 340                      if (o.cookie) {
 341                          self._cookie(o.selected, o.cookie);
 342                      }
 343                      
 344                      self.element.queue("tabs", function() {
 345                          showTab(el, $show);
 346                      });
 347  
 348                      self.load(self.anchors.index(this)); // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171

 349                      
 350                      this.blur();
 351                      return false;
 352                  }
 353              }
 354  
 355              if (o.cookie) {
 356                  self._cookie(o.selected, o.cookie);
 357              }
 358  
 359              // show new tab

 360              if ($show.length) {
 361                  if ($hide.length) {
 362                      self.element.queue("tabs", function() {
 363                          hideTab(el, $hide);
 364                      });
 365                  }
 366                  self.element.queue("tabs", function() {
 367                      showTab(el, $show);
 368                  });
 369                  
 370                  self.load(self.anchors.index(this));
 371              }
 372              else {
 373                  throw 'jQuery UI Tabs: Mismatching fragment identifier.';
 374              }
 375  
 376              // Prevent IE from keeping other link focussed when using the back button

 377              // and remove dotted border from clicked link. This is controlled via CSS

 378              // in modern browsers; blur() removes focus from address bar in Firefox

 379              // which can become a usability and annoying problem with tabs('rotate').

 380              if ($.browser.msie) {
 381                  this.blur();
 382              }
 383  
 384          });
 385  
 386          // disable click in any case

 387          this.anchors.bind('click.tabs', function(){return false;});
 388  
 389      },
 390  
 391      destroy: function() {
 392          var o = this.options;
 393  
 394          this.abort();
 395          
 396          this.element.unbind('.tabs')
 397              .removeClass('ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible')
 398              .removeData('tabs');
 399  
 400          this.list.removeClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
 401  
 402          this.anchors.each(function() {
 403              var href = $.data(this, 'href.tabs');
 404              if (href) {
 405                  this.href = href;
 406              }
 407              var $this = $(this).unbind('.tabs');
 408              $.each(['href', 'load', 'cache'], function(i, prefix) {
 409                  $this.removeData(prefix + '.tabs');
 410              });
 411          });
 412  
 413          this.lis.unbind('.tabs').add(this.panels).each(function() {
 414              if ($.data(this, 'destroy.tabs')) {
 415                  $(this).remove();
 416              }
 417              else {
 418                  $(this).removeClass([
 419                      'ui-state-default',
 420                      'ui-corner-top',
 421                      'ui-tabs-selected',
 422                      'ui-state-active',
 423                      'ui-state-hover',
 424                      'ui-state-focus',
 425                      'ui-state-disabled',
 426                      'ui-tabs-panel',
 427                      'ui-widget-content',
 428                      'ui-corner-bottom',
 429                      'ui-tabs-hide'
 430                  ].join(' '));
 431              }
 432          });
 433  
 434          if (o.cookie) {
 435              this._cookie(null, o.cookie);
 436          }
 437      },
 438  
 439      add: function(url, label, index) {
 440          if (index === undefined) {
 441              index = this.anchors.length; // append by default

 442          }
 443  
 444          var self = this, o = this.options,
 445              $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label)),
 446              id = !url.indexOf('#') ? url.replace('#', '') : this._tabId($('a', $li)[0]);
 447  
 448          $li.addClass('ui-state-default ui-corner-top').data('destroy.tabs', true);
 449  
 450          // try to find an existing element before creating a new one

 451          var $panel = $('#' + id);
 452          if (!$panel.length) {
 453              $panel = $(o.panelTemplate).attr('id', id).data('destroy.tabs', true);
 454          }
 455          $panel.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide');
 456  
 457          if (index >= this.lis.length) {
 458              $li.appendTo(this.list);
 459              $panel.appendTo(this.list[0].parentNode);
 460          }
 461          else {
 462              $li.insertBefore(this.lis[index]);
 463              $panel.insertBefore(this.panels[index]);
 464          }
 465  
 466          o.disabled = $.map(o.disabled,
 467              function(n, i) { return n >= index ? ++n : n; });
 468  
 469          this._tabify();
 470  
 471          if (this.anchors.length == 1) { // after tabify
 472              $li.addClass('ui-tabs-selected ui-state-active');
 473              $panel.removeClass('ui-tabs-hide');
 474              this.element.queue("tabs", function() {
 475                  self._trigger('show', null, self._ui(self.anchors[0], self.panels[0]));
 476              });
 477                  
 478              this.load(0);
 479          }
 480  
 481          // callback

 482          this._trigger('add', null, this._ui(this.anchors[index], this.panels[index]));
 483      },
 484  
 485      remove: function(index) {
 486          var o = this.options, $li = this.lis.eq(index).remove(),
 487              $panel = this.panels.eq(index).remove();
 488  
 489          // If selected tab was removed focus tab to the right or

 490          // in case the last tab was removed the tab to the left.

 491          if ($li.hasClass('ui-tabs-selected') && this.anchors.length > 1) {
 492              this.select(index + (index + 1 < this.anchors.length ? 1 : -1));
 493          }
 494  
 495          o.disabled = $.map($.grep(o.disabled, function(n, i) { return n != index; }),
 496              function(n, i) { return n >= index ? --n : n; });
 497  
 498          this._tabify();
 499  
 500          // callback

 501          this._trigger('remove', null, this._ui($li.find('a')[0], $panel[0]));
 502      },
 503  
 504      enable: function(index) {
 505          var o = this.options;
 506          if ($.inArray(index, o.disabled) == -1) {
 507              return;
 508          }
 509  
 510          this.lis.eq(index).removeClass('ui-state-disabled');
 511          o.disabled = $.grep(o.disabled, function(n, i) { return n != index; });
 512  
 513          // callback

 514          this._trigger('enable', null, this._ui(this.anchors[index], this.panels[index]));
 515      },
 516  
 517      disable: function(index) {
 518          var self = this, o = this.options;
 519          if (index != o.selected) { // cannot disable already selected tab
 520              this.lis.eq(index).addClass('ui-state-disabled');
 521  
 522              o.disabled.push(index);
 523              o.disabled.sort();
 524  
 525              // callback

 526              this._trigger('disable', null, this._ui(this.anchors[index], this.panels[index]));
 527          }
 528      },
 529  
 530      select: function(index) {
 531          if (typeof index == 'string') {
 532              index = this.anchors.index(this.anchors.filter('[href$=' + index + ']'));
 533          }
 534          else if (index === null) { // usage of null is deprecated, TODO remove in next release
 535              index = -1;
 536          }
 537          if (index == -1 && this.options.collapsible) {
 538              index = this.options.selected;
 539          }
 540  
 541          this.anchors.eq(index).trigger(this.options.event + '.tabs');
 542      },
 543  
 544      load: function(index) {
 545          var self = this, o = this.options, a = this.anchors.eq(index)[0], url = $.data(a, 'load.tabs');
 546  
 547          this.abort();
 548  
 549          // not remote or from cache

 550          if (!url || this.element.queue("tabs").length !== 0 && $.data(a, 'cache.tabs')) {
 551              this.element.dequeue("tabs");
 552              return;
 553          }
 554  
 555          // load remote from here on

 556          this.lis.eq(index).addClass('ui-state-processing');
 557  
 558          if (o.spinner) {
 559              var span = $('span', a);
 560              span.data('label.tabs', span.html()).html(o.spinner);
 561          }
 562  
 563          this.xhr = $.ajax($.extend({}, o.ajaxOptions, {
 564              url: url,
 565              success: function(r, s) {
 566                  $(self._sanitizeSelector(a.hash)).html(r);
 567  
 568                  // take care of tab labels

 569                  self._cleanup();
 570  
 571                  if (o.cache) {
 572                      $.data(a, 'cache.tabs', true); // if loaded once do not load them again

 573                  }
 574  
 575                  // callbacks

 576                  self._trigger('load', null, self._ui(self.anchors[index], self.panels[index]));
 577                  try {
 578                      o.ajaxOptions.success(r, s);
 579                  }
 580                  catch (e) {}
 581  
 582                  // last, so that load event is fired before show...

 583                  self.element.dequeue("tabs");
 584              }
 585          }));
 586      },
 587  
 588      abort: function() {
 589          // stop possibly running animations

 590          this.element.queue([]);
 591          this.panels.stop(false, true);
 592  
 593          // terminate pending requests from other tabs

 594          if (this.xhr) {
 595              this.xhr.abort();
 596              delete this.xhr;
 597          }
 598  
 599          // take care of tab labels

 600          this._cleanup();
 601  
 602      },
 603  
 604      url: function(index, url) {
 605          this.anchors.eq(index).removeData('cache.tabs').data('load.tabs', url);
 606      },
 607  
 608      length: function() {
 609          return this.anchors.length;
 610      }
 611  
 612  });
 613  
 614  $.extend($.ui.tabs, {
 615      version: '1.7.2',
 616      getter: 'length',
 617      defaults: {
 618          ajaxOptions: null,
 619          cache: false,
 620          cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
 621          collapsible: false,
 622          disabled: [],
 623          event: 'click',
 624          fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
 625          idPrefix: 'ui-tabs-',
 626          panelTemplate: '<div></div>',
 627          spinner: '<em>Loading&#8230;</em>',
 628          tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'
 629      }
 630  });
 631  
 632  /*

 633   * Tabs Extensions

 634   */
 635  
 636  /*

 637   * Rotate

 638   */
 639  $.extend($.ui.tabs.prototype, {
 640      rotation: null,
 641      rotate: function(ms, continuing) {
 642  
 643          var self = this, o = this.options;
 644          
 645          var rotate = self._rotate || (self._rotate = function(e) {
 646              clearTimeout(self.rotation);
 647              self.rotation = setTimeout(function() {
 648                  var t = o.selected;
 649                  self.select( ++t < self.anchors.length ? t : 0 );
 650              }, ms);
 651              
 652              if (e) {
 653                  e.stopPropagation();
 654              }
 655          });
 656          
 657          var stop = self._unrotate || (self._unrotate = !continuing ?
 658              function(e) {
 659                  if (e.clientX) { // in case of a true click
 660                      self.rotate(null);
 661                  }
 662              } :
 663              function(e) {
 664                  t = o.selected;
 665                  rotate();
 666              });
 667  
 668          // start rotation

 669          if (ms) {
 670              this.element.bind('tabsshow', rotate);
 671              this.anchors.bind(o.event + '.tabs', stop);
 672              rotate();
 673          }
 674          // stop rotation

 675          else {
 676              clearTimeout(self.rotation);
 677              this.element.unbind('tabsshow', rotate);
 678              this.anchors.unbind(o.event + '.tabs', stop);
 679              delete this._rotate;
 680              delete this._unrotate;
 681          }
 682      }
 683  });
 684  
 685  })(jQuery);