Dotclear

source: admin/js/jquery/jquery.pageTabs.js @ 2113:a134102bfd9a

Revision 2113:a134102bfd9a, 2.9 KB checked in by Nicolas <nikrou77@…>, 12 years ago (diff)

Refactoring for jQuery pageTabs plugin
Navigation in history comes back (onhashchange)
Fix ie7-hashchange to not use $.browser
Fix use of trigger for onetabload and tabload events

Add tests for onhashchange
Add tests for onetabload and tabload event
(Tested on chrome, IE8 and firefox 24)

Line 
1(function($) {
2     'use strict';
3   
4     $.pageTabs = function(start_tab, opts) {
5          var defaults = {
6               containerClass: 'part-tabs',
7               partPrefix: 'part-',
8               contentClass: 'multi-part',
9               activeClass: 'part-tabs-active',
10               idTabPrefix: 'part-tabs-'
11          };
12         
13          $.pageTabs.options = $.extend({}, defaults, opts);
14          var active_tab = start_tab || '';
15          var hash = $.pageTabs.getLocationHash();
16
17          if (hash !== undefined && hash) {
18               $('ul li a[href$="#'+hash+'"]').parent().trigger('click');
19               active_tab = hash;
20          } else if (active_tab == '') { // open first part
21               active_tab = $('.'+$.pageTabs.options.contentClass+':eq(0)').attr('id');
22          }
23
24          createTabs();
25         
26          $('ul li', '.'+$.pageTabs.options.containerClass).click(function(e) {
27               if ($(this).hasClass($.pageTabs.options.activeClass)) {
28                    return;
29               }
30
31               $(this).parent().find('li.'+$.pageTabs.options.activeClass).removeClass($.pageTabs.options.activeClass);
32               $(this).addClass($.pageTabs.options.activeClass);
33               $('.'+$.pageTabs.options.contentClass+'.active').removeClass('active').hide();
34
35               var part_to_activate = $('#'+$.pageTabs.options.partPrefix+getHash($(this).find('a').attr('href')));
36
37               part_to_activate.addClass('active').show();
38               if (!part_to_activate.hasClass('loaded')) {
39                    part_to_activate.onetabload();
40                    part_to_activate.addClass('loaded');
41               }
42               
43               part_to_activate.tabload();
44          });
45
46          $(window).bind('hashchange onhashchange', function(e) {
47               $.pageTabs.clickTab($.pageTabs.getLocationHash());
48          });
49
50          $.pageTabs.clickTab(active_tab);
51         
52          return this;
53     };
54     
55     var createTabs = function createTabs() {
56          var lis = [], li_class = '';
57         
58          $('.'+$.pageTabs.options.contentClass).each(function() {
59               $(this).hide();
60               lis.push('<li id="'+$.pageTabs.options.idTabPrefix+$(this).attr('id')+'">'
61                     +'<a href="#'+$(this).attr('id')+'">'+$(this).attr('title')+'</a></li>');
62               $(this).attr('id', $.pageTabs.options.partPrefix + $(this).attr('id')).prop('title','');
63          });
64         
65          $('<div class="'+$.pageTabs.options.containerClass+'"><ul>'+lis.join('')+'</ul></div>')
66               .insertBefore($('.'+$.pageTabs.options.contentClass).get(0));
67     };
68     
69     var getHash = function getHash(href) {
70          return href.replace(/.*#/, '');
71     };
72     
73     $.pageTabs.clickTab = function(tab) {
74          $('ul li a', '.'+$.pageTabs.options.containerClass).filter(function() {
75               return getHash($(this).attr('href'))==tab;
76          }).parent().click();
77     };
78
79     $.pageTabs.getLocationHash = function() {
80          return getHash(document.location.hash);
81     };
82})(jQuery);
83
84jQuery.fn.tabload = function(f) {
85     this.each(function() {
86          if (f) {
87               chainHandler(this,'tabload',f)
88          } else {
89               var h = this.tabload;
90               if (h) { h.apply(this); }
91          }
92     });
93     return this;
94};
95
96jQuery.fn.onetabload = function(f) {
97     this.each(function() {
98          if (f) {
99               chainHandler(this,'onetabload',f);
100          } else {
101               var h = this.onetabload;
102               if (h != null) {
103                    h.apply(this);
104                    this.onetabload = null;
105               }
106          }
107     });
108     return this;
109};
Note: See TracBrowser for help on using the repository browser.

Sites map