Changeset 3069

Timestamp:

09/02/07 21:01:16 (1 year ago)

Author:

klaus.hartl

Message:

Tabs - work in progress

Location:

trunk/plugins/ui

Files:

• tests/tabs.html (modified) (2 diffs)
• ui.tabs.js (modified) (14 diffs)

trunk/plugins/ui/tests/tabs.html

@@ -26 +26 @@
                     fxFade: true,
                     fxSpeed: 'fast',
-                    onClick: function() {
-                        alert('onClick');
+                    click: function() {
+                        alert('click callback');
                     },
-                    onHide: function() {
-                        alert('onHide');
+                    hide: function() {
+                        alert('hide callback');
                     },
-                    onShow: function() {
-                        alert('onShow');
+                    show: function() {
+                        alert('show callback');
                     }
                 });
                 //$('#container-7 ul').tabs({ fxAutoHeight: true });
                 $('#container-7 ul').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
-                $('#container8 ul').tabs();
+                $('#container-8 ul').tabs();
                 $('#container-9 ul').tabs({ disabled: [3] });
 
@@ -317 +317 @@
         <div id="container-8">
             <ul>
-                <li><a href="ahah_1.html"><span>One</span></a></li>
-                <li><a href="ahah_2.html"><span>Two</span></a></li>
-                <li><a href="ahah_3.html"><span>Three</span></a></li>
+                <li><a href="ahah_1.html" title="Tab one"><span>One</span></a></li>
+                <li><a href="ahah_2.html" title="Tab two"><span>Two</span></a></li>
+                <li><a href="ahah_3.html" title="Tab three"><span>Three</span></a></li>
             </ul>
         </div>

trunk/plugins/ui/ui.tabs.js

@@ -8 +8 @@
     
     $.fn.tabs = function(initial, options) {
-        if (initial && initial.constructor == Object) {
+        if (initial && initial.constructor == Object) { // shift arguments
             options = initial;
             initial = null;
@@ -23 +23 @@
     
     // create chainable tabs methods
-    $.each(['add', 'remove'], function(i, method) {
+    $.each(['add', 'remove', 'enable', 'disable', 'show', 'load'], function(i, method) {
         $.fn[method + 'Tab'] = function() {
             var args = arguments;
@@ -44 +44 @@
             this.jQueryTabs.remove.apply(this.jQueryTabs, args);
         });
+    };
+    
+    $.fn.enableTab = function(position) {
+        return this.each(function() {
+            
+        });
+    };
+    
+    $.fn.disableTab = function(position) {
+        return this.each(function() {
+            
+        });
+    };
+    
+    $.fn.showTab = function(position) {
+        return this.each(function() {
+            
+        });
+    };
+    
+    $.fn.loadTab = function(position, url, callback) {
+        // frequently requested: if url is passed reload tab with that url
+        return this.each(function() {
+            
+        });
     };*/
-    
-    $.fn.enableTab = function(position) {
-        return this.each(function() {
-            
-        });
-    };
-    
-    $.fn.disableTab = function(position) {
-        return this.each(function() {
-            
-        });
-    };
-    
-    $.fn.showTab = function(position) {
-        return this.each(function() {
-            
-        });
-    };
-    
-    $.fn.reloadTab = function(position, url) {
-        // frequently requested: if url is passed reload tab with that url
-        return this.each(function() {
-            
-        });
-    };
     
     $.fn.activeTab = function() {
@@ -81 +81 @@
         this.options = $.extend({
             initial: 0,
-            /*disabled: null,*/
+            disabled: [],
             // TODO bookmarkable: $.ajaxHistory ? true : false,
             spinner: 'Loading…',
@@ -89 +89 @@
             fxShow: null,
             fxHide: null,*/
+            closable: false, // TODO
+            closed: false, // TODO selected?
             fxSpeed: 'normal',
             /*fxShowSpeed: null,
             fxHideSpeed: null,*/
-            click: null,
-            show: null,
+            click: function() {},
+            hide: function() {},
+            show: function() {},
             navClass: 'tabs-nav',
             selectedClass: 'tabs-selected',
@@ -118 +121 @@
                     instance.$containers = instance.$containers.add(a.hash); // jQuery's add() does not work somehow
                 } else { // remote tab
-                    // TODO create and add container
+                    // TODO create unique ids
+                    var id = a.title && a.title.replace(/\s/g, '_') || options.hashPrefix + (i + 1), url = a.href;
+                    a.href = '#' + id;
+                    a.url = url;
+                    instance.$containers = instance.$containers.add(
+                        $('<div id="' + id + '" class="' + options.containerClass + '"></div>')
+                            .insertAfter( instance.$containers[i - 1] || $source )
+                    );
                 }
             });
@@ -162 +172 @@
             //tabs.eq(options.initial).trigger('loadRemoteTab').end();
             
+            // disabled tabs
+            for (var i = 0, k = options.disabled.length; i < k; i++) {
+                this.disable(--options.disabled[i]);
+            }
+            
             // setup animations
             var showAnim = {}, hideAnim = {}, showSpeed = options.fxShowSpeed || options.fxSpeed, hideSpeed = options.fxHideSpeed || options.fxSpeed;
@@ -188 +203 @@
             }
             
+            // callbacks
+            var click = options.click, hide = options.hide, show = options.show;
+            
             var $containers = this.$containers;
             
@@ -196 +214 @@
                 //var trueClick = e.clientX; // add to history only if true click occured, not a triggered click
                 var clicked = this, $li = $(this).parents('li:eq(0)'), $show = $(this.hash), $hide = $containers.filter(':visible');
-
+                
                 // if animation is still running, tab is selected or disabled or onClick callback returns false stop here
                 // check if onClick returns false last so that it is not executed for a disabled tab
-                if ($source['locked'] || $li.is('.' + options.selectedClass, '.' + options.disabledClass) 
-                    || typeof onClick == 'function' && onClick(this, $show[0], $hide[0]) === false) {
+                if ($source['locked'] || $li.is('.' + options.selectedClass + ', .' + options.disabledClass) 
+                    || click(this, $show[0], $hide[0]) === false) {
                     this.blur();
                     return false;
@@ -208 +226 @@
 
                 // show new tab
-                if ($show.size()) {
+                if ($show.length) {
 
                     // prevent scrollbar scrolling to 0 and than back in IE7, happens only if bookmarking/history is enabled
@@ -232 +250 @@
                             $(clicked).parents('li:eq(0)').addClass(options.selectedClass).siblings().removeClass(options.selectedClass);
                             $hide.addClass(options.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.                        
-                            if (typeof onHide == 'function') {
-                                onHide(clicked, $show[0], $hide[0]);
-                            }
+                            hide(clicked, $show[0], $hide[0]);
                             if (!(options.fxSlide || options.fxFade || options.fxShow)) {
                                 $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox cause by gap between showing and hiding the tab containers
@@ -244 +260 @@
                                     $show[0].style.filter = '';
                                 }
-                                if (typeof onShow == 'function') {
-                                    onShow(clicked, $show[0], $hide[0]);
-                                }
+                                show(clicked, $show[0], $hide[0]);
                                 $source['locked'] = null;
                             });
                         });
                     }
-                    switchTab();
-
-                    /*if (!options.remote) {
+                    
+                    if (this.url) { // remote tab
+                        instance.load(instance.$tabs.index(this) + 1, this.url, switchTab)
+                    } else {
                         switchTab();
-                    } else {
-                        $(clicked).trigger('loadRemoteTab', [switchTab]);
-                    }*/
+                    }
+
+                    // Set scrollbar to saved position - need to use timeout with 0 to prevent browser scroll to target of hash
+                    var scrollX = window.pageXOffset || document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+                    var scrollY = window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop || 0;
+                    setTimeout(function() {
+                        scrollTo(scrollX, scrollY);
+                    }, 0);
 
                 } else {
                     alert('There is no such container.');
                 }
-
-                // Set scrollbar to saved position - need to use timeout with 0 to prevent browser scroll to target of hash
-                var scrollX = window.pageXOffset || document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-                var scrollY = window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop || 0;
-                setTimeout(function() {
-                    scrollTo(scrollX, scrollY);
-                }, 0);
 
                 this.blur(); // prevent IE from keeping other link focussed when using the back button
@@ -298 +311 @@
             }           
         },
-        remove: function(position) { // TODO callback
+        remove: function(position, callback) {
             if (position && position.constructor == Number) {
                 --position;
@@ -306 +319 @@
                 this.tabify();
             }
-        },
-        enable: function(position) { // TODO callback
-            
-        },
-        disable: function(position) { // TODO callback
-            
-        },
-        show: function(position) { // TODO callback
-            
-        },
-        reload: function(position, url) { // TODO callback
-            
+            if (callback && callback.constructor == Function) {
+                callback();
+            }
+        },
+        enable: function(position, callback) {
+            var $li = this.$tabs.slice(position - 1, position).parents('li:eq(0)');
+            $li.removeClass(this.options.disabledClass);
+            if ($.browser.safari) { /* fix disappearing tab after enabling in Safari... TODO check Safari 3 */
+                $li.animate({ opacity: 1 }, 1, function() {
+                    $li.css({ opacity: '' });
+                });
+            }
+            if (callback && callback.constructor == Function) {
+                callback();
+            }
+        },
+        disable: function(position, callback) {
+            var $li = this.$tabs.slice(position - 1, position).parents('li:eq(0)');            
+            if ($.browser.safari) { /* fix opacity of tab after disabling in Safari... TODO check Safari 3 */
+                $li.animate({ opacity: 0 }, 1, function() {
+                   $li.css({ opacity: '' });
+                });
+            }
+            $li.addClass(this.options.disabledClass);
+            if (callback && callback.constructor == Function) {
+                callback();
+            }
+        },
+        show: function(position, callback) { // TODO callback
+            
+        },
+        load: function(position, url, callback) { // TODO callback
+            var options = this.options;
+            if (url && url.constructor == Function) {  // shift arguments
+                callback = url;
+            }
+            var $a = this.$tabs.slice(position - 1, position).addClass(options.loadingClass),
+                $span = $('span', $a), text = $span.html();
+            if (options.spinner) {
+                // TODO if spinner is image
+                $span.html('<em>' + options.spinner + '</em>');
+            }
+            setTimeout(function() { // Timeout is again required in IE, "wait" for id being restored
+                $($a[0].hash).load(url, function() {
+                    if (options.spinner) {
+                        $span.html(text);
+                    }
+                    $a.removeClass(options.loadingClass);
+                    if (callback && callback.constructor == Function) {
+                        callback();
+                    }
+                });
+            }, 0);            
         }
     });
     
-    
 })(jQuery);