Dolphin 7.1 Page Builder request

houstonlively posted 27th of July 2012 in Community Voice. 7 comments.

 

I've noticed that not all of the Jquery library is loaded for every page, most notably jquery-ui.js, ui.core.js, and maybe a few others.  I understand this... no need to load a 300kb js file if you don't need it.

If you want to put a jquery accordion in an html block in page builder, you have to add the js to the html block where you want to use the acordion.

To make things a little cleaner, would it be a lot of trouble to add a section in page builder where you could call any js files that would be used by the page, so we don't have to put the js in the html blocks themselves?  It's no big deal if this is a lot of trouble.... I just think it would keep things a little cleaner and organized.  A little checkbox section on which jquery widgets to use on the page would be really cool.

Then if you wanted to take it a bit further, you could add a few more sample blocks to page builder, instead of just a Simple HTML block.  You could have a tabbed content block,  and an accordion block.

 

 

For anyone that would like to see these two jquery widgets work in page builder, create a few html blocks on a page, and paste this code into them using using the html editor.

For Tabbed Content Block:

<style>
.ui-tabs-panel {
height:200px;
overflow:auto
}
</style>
<script type="text/javascript">// <![CDATA[
/*
 * jQuery UI 1.7.2
 *
 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI
 */
    ;
    jQuery.ui || (function($) {

        var _remove = $.fn.remove,
            isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);

        //Helper functions and ui object
        $.ui = {
            version: "1.7.2",

            // $.ui.plugin is deprecated.  Use the proxy pattern instead.
            plugin: {
                add: function(module, option, set) {
                    var proto = $.ui[module].prototype;
                    for (var i in set) {
                        proto.plugins[i] = proto.plugins[i] || [];
                        proto.plugins[i].push([option, set[i]]);
                    }
                },
                call: function(instance, name, args) {
                    var set = instance.plugins[name];
                    if (!set || !instance.element[0].parentNode) {
                        return;
                    }

                    for (var i = 0; i < set.length; i++) {
                        if (instance.options[set[i][0]]) {
                            set[i][1].apply(instance.element, args);
                        }
                    }
                }
            },

            contains: function(a, b) {
                return document.compareDocumentPosition ? a.compareDocumentPosition(b) & 16 : a !== b && a.contains(b);
            },

            hasScroll: function(el, a) {

                //If overflow is hidden, the element might have extra content, but the user wants to hide it
                if ($(el).css('overflow') == 'hidden') {
                    return false;
                }

                var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',
                    has = false;

                if (el[scroll] > 0) {
                    return true;
                }

                // TODO: determine which cases actually cause this to happen
                // if the element doesn't have the scroll set, see if it's possible to
                // set the scroll
                el[scroll] = 1;
                has = (el[scroll] > 0);
                el[scroll] = 0;
                return has;
            },

            isOverAxis: function(x, reference, size) {
                //Determines when x coordinate is over "b" element axis
                return (x > reference) && (x < (reference + size));
            },

            isOver: function(y, x, top, left, height, width) {
                //Determines when x, y coordinates is over "b" element
                return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
            },

            keyCode: {
                BACKSPACE: 8,
                CAPS_LOCK: 20,
                COMMA: 188,
                CONTROL: 17,
                DELETE: 46,
                DOWN: 40,
                END: 35,
                ENTER: 13,
                ESCAPE: 27,
                HOME: 36,
                INSERT: 45,
                LEFT: 37,
                NUMPAD_ADD: 107,
                NUMPAD_DECIMAL: 110,
                NUMPAD_DIVIDE: 111,
                NUMPAD_ENTER: 108,
                NUMPAD_MULTIPLY: 106,
                NUMPAD_SUBTRACT: 109,
                PAGE_DOWN: 34,
                PAGE_UP: 33,
                PERIOD: 190,
                RIGHT: 39,
                SHIFT: 16,
                SPACE: 32,
                TAB: 9,
                UP: 38
            }
        };

        // WAI-ARIA normalization
        if (isFF2) {
            var attr = $.attr,
                removeAttr = $.fn.removeAttr,
                ariaNS = "http://www.w3.org/2005/07/aaa",
                ariaState = /^aria-/,
                ariaRole = /^wairole:/;

            $.attr = function(elem, name, value) {
                var set = value !== undefined;

                return (name == 'role' ? (set ? attr.call(this, elem, name, "wairole:" + value) : (attr.apply(this, arguments) || "").replace(ariaRole, "")) : (ariaState.test(name) ? (set ? elem.setAttributeNS(ariaNS, name.replace(ariaState, "aaa:"), value) : attr.call(this, elem, name.replace(ariaState, "aaa:"))) : attr.apply(this, arguments)));
            };

            $.fn.removeAttr = function(name) {
                return (ariaState.test(name) ? this.each(function() {
                    this.removeAttributeNS(ariaNS, name.replace(ariaState, ""));
                }) : removeAttr.call(this, name));
            };
        }

        //jQuery plugins
        $.fn.extend({
            remove: function() {
                // Safari has a native remove event which actually removes DOM elements,
                // so we have to use triggerHandler instead of trigger (#3037).
                $("*", this).add(this).each(function() {
                    $(this).triggerHandler("remove");
                });
                return _remove.apply(this, arguments);
            },

            enableSelection: function() {
                return this.attr('unselectable', 'off').css('MozUserSelect', '').unbind('selectstart.ui');
            },

            disableSelection: function() {
                return this.attr('unselectable', 'on').css('MozUserSelect', 'none').bind('selectstart.ui', function() {
                    return false;
                });
            },

            scrollParent: function() {
                var scrollParent;
                if (($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
                    scrollParent = this.parents().filter(function() {
                        return (/(relative|absolute|fixed)/).test($.curCSS(this, 'position', 1)) && (/(auto|scroll)/).test($.curCSS(this, 'overflow', 1) + $.curCSS(this, 'overflow-y', 1) + $.curCSS(this, 'overflow-x', 1));
                    }).eq(0);
                } else {
                    scrollParent = this.parents().filter(function() {
                        return (/(auto|scroll)/).test($.curCSS(this, 'overflow', 1) + $.curCSS(this, 'overflow-y', 1) + $.curCSS(this, 'overflow-x', 1));
                    }).eq(0);
                }

                return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
            }
        });


        //Additional selectors
        $.extend($.expr[':'], {
            data: function(elem, i, match) {
                return !!$.data(elem, match[3]);
            },

            focusable: function(element) {
                var nodeName = element.nodeName.toLowerCase(),
                    tabIndex = $.attr(element, 'tabindex');
                return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex))
                // the element and all of its ancestors must be visible
                // the browser may report that the area is hidden
                && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
            },

            tabbable: function(element) {
                var tabIndex = $.attr(element, 'tabindex');
                return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
            }
        });


        // $.widget is a factory to create jQuery plugins
        // taking some boilerplate code out of the plugin code

        function getter(namespace, plugin, method, args) {
            function getMethods(type) {
                var methods = $[namespace][plugin][type] || [];
                return (typeof methods == 'string' ? methods.split(/,?\s+/) : methods);
            }

            var methods = getMethods('getter');
            if (args.length == 1 && typeof args[0] == 'string') {
                methods = methods.concat(getMethods('getterSetter'));
            }
            return ($.inArray(method, methods) != -1);
        }

        $.widget = function(name, prototype) {
            var namespace = name.split(".")[0];
            name = name.split(".")[1];

            // create plugin method
            $.fn[name] = function(options) {
                var isMethodCall = (typeof options == 'string'),
                    args = Array.prototype.slice.call(arguments, 1);

                // prevent calls to internal methods
                if (isMethodCall && options.substring(0, 1) == '_') {
                    return this;
                }

                // handle getter methods
                if (isMethodCall && getter(namespace, name, options, args)) {
                    var instance = $.data(this[0], name);
                    return (instance ? instance[options].apply(instance, args) : undefined);
                }

                // handle initialization and non-getter methods
                return this.each(function() {
                    var instance = $.data(this, name);

                    // constructor
                    (!instance && !isMethodCall && $.data(this, name, new $[namespace][name](this, options))._init());

                    // method call
                    (instance && isMethodCall && $.isFunction(instance[options]) && instance[options].apply(instance, args));
                });
            };

            // create widget constructor
            $[namespace] = $[namespace] || {};
            $[namespace][name] = function(element, options) {
                var self = this;

                this.namespace = namespace;
                this.widgetName = name;
                this.widgetEventPrefix = $[namespace][name].eventPrefix || name;
                this.widgetBaseClass = namespace + '-' + name;

                this.options = $.extend({}, $.widget.defaults, $[namespace][name].defaults, $.metadata && $.metadata.get(element)[name], options);

                this.element = $(element).bind('setData.' + name, function(event, key, value) {
                    if (event.target == element) {
                        return self._setData(key, value);
                    }
                }).bind('getData.' + name, function(event, key) {
                    if (event.target == element) {
                        return self._getData(key);
                    }
                }).bind('remove', function() {
                    return self.destroy();
                });
            };

            // add widget prototype
            $[namespace][name].prototype = $.extend({}, $.widget.prototype, prototype);

            // TODO: merge getter and getterSetter properties from widget prototype
            // and plugin prototype
            $[namespace][name].getterSetter = 'option';
        };

        $.widget.prototype = {
            _init: function() {},
            destroy: function() {
                this.element.removeData(this.widgetName).removeClass(this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled').removeAttr('aria-disabled');
            },

            option: function(key, value) {
                var options = key,
                    self = this;

                if (typeof key == "string") {
                    if (value === undefined) {
                        return this._getData(key);
                    }
                    options = {};
                    options[key] = value;
                }

                $.each(options, function(key, value) {
                    self._setData(key, value);
                });
            },
            _getData: function(key) {
                return this.options[key];
            },
            _setData: function(key, value) {
                this.options[key] = value;

                if (key == 'disabled') {
                    this.element[value ? 'addClass' : 'removeClass'](
                    this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled').attr("aria-disabled", value);
                }
            },

            enable: function() {
                this._setData('disabled', false);
            },
            disable: function() {
                this._setData('disabled', true);
            },

            _trigger: function(type, event, data) {
                var callback = this.options[type],
                    eventName = (type == this.widgetEventPrefix ? type : this.widgetEventPrefix + type);

                event = $.Event(event);
                event.type = eventName;

                // copy original event properties over to the new event
                // this would happen if we could call $.event.fix instead of $.Event
                // but we don't have a way to force an event to be fixed multiple times
                if (event.originalEvent) {
                    for (var i = $.event.props.length, prop; i;) {
                        prop = $.event.props[--i];
                        event[prop] = event.originalEvent[prop];
                    }
                }

                this.element.trigger(event, data);

                return !($.isFunction(callback) && callback.call(this.element[0], event, data) === false || event.isDefaultPrevented());
            }
        };

        $.widget.defaults = {
            disabled: false
        };


        /** Mouse Interaction Plugin **/

        $.ui.mouse = {
            _mouseInit: function() {
                var self = this;

                this.element.bind('mousedown.' + this.widgetName, function(event) {
                    return self._mouseDown(event);
                }).bind('click.' + this.widgetName, function(event) {
                    if (self._preventClickEvent) {
                        self._preventClickEvent = false;
                        event.stopImmediatePropagation();
                        return false;
                    }
                });

                // Prevent text selection in IE
                if ($.browser.msie) {
                    this._mouseUnselectable = this.element.attr('unselectable');
                    this.element.attr('unselectable', 'on');
                }

                this.started = false;
            },

            // TODO: make sure destroying one instance of mouse doesn't mess with
            // other instances of mouse
            _mouseDestroy: function() {
                this.element.unbind('.' + this.widgetName);

                // Restore text selection in IE
                ($.browser.msie && this.element.attr('unselectable', this._mouseUnselectable));
            },

            _mouseDown: function(event) {
                // don't let more than one widget handle mouseStart
                // TODO: figure out why we have to use originalEvent
                event.originalEvent = event.originalEvent || {};
                if (event.originalEvent.mouseHandled) {
                    return;
                }

                // we may have missed mouseup (out of window)
                (this._mouseStarted && this._mouseUp(event));

                this._mouseDownEvent = event;

                var self = this,
                    btnIsLeft = (event.which == 1),
                    elIsCancel = (typeof this.options.cancel == "string" ? $(event.target).parents().add(event.target).filter(this.options.cancel).length : false);
                if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
                    return true;
                }

                this.mouseDelayMet = !this.options.delay;
                if (!this.mouseDelayMet) {
                    this._mouseDelayTimer = setTimeout(function() {
                        self.mouseDelayMet = true;
                    }, this.options.delay);
                }

                if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
                    this._mouseStarted = (this._mouseStart(event) !== false);
                    if (!this._mouseStarted) {
                        event.preventDefault();
                        return true;
                    }
                }

                // these delegates are required to keep context
                this._mouseMoveDelegate = function(event) {
                    return self._mouseMove(event);
                };
                this._mouseUpDelegate = function(event) {
                    return self._mouseUp(event);
                };
                $(document).bind('mousemove.' + this.widgetName, this._mouseMoveDelegate).bind('mouseup.' + this.widgetName, this._mouseUpDelegate);

                // preventDefault() is used to prevent the selection of text here -
                // however, in Safari, this causes select boxes not to be selectable
                // anymore, so this fix is needed
                ($.browser.safari || event.preventDefault());

                event.originalEvent.mouseHandled = true;
                return true;
            },

            _mouseMove: function(event) {
                // IE mouseup check - mouseup happened when mouse was out of window
                if ($.browser.msie && document.documentMode < 9 && !event.button) {
                    return this._mouseUp(event);
                }

                if (this._mouseStarted) {
                    this._mouseDrag(event);
                    return event.preventDefault();
                }

                if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
                    this._mouseStarted = (this._mouseStart(this._mouseDownEvent, event) !== false);
                    (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
                }

                return !this._mouseStarted;
            },

            _mouseUp: function(event) {
                $(document).unbind('mousemove.' + this.widgetName, this._mouseMoveDelegate).unbind('mouseup.' + this.widgetName, this._mouseUpDelegate);

                if (this._mouseStarted) {
                    this._mouseStarted = false;
                    this._preventClickEvent = (event.target == this._mouseDownEvent.target);
                    this._mouseStop(event);
                }

                return false;
            },

            _mouseDistanceMet: function(event) {
                return (Math.max(
                Math.abs(this._mouseDownEvent.pageX - event.pageX), Math.abs(this._mouseDownEvent.pageY - event.pageY)) >= this.options.distance);
            },

            _mouseDelayMet: function(event) {
                return this.mouseDelayMet;
            },

            // These are placeholder methods, to be overriden by extending plugin
            _mouseStart: function(event) {},
            _mouseDrag: function(event) {},
            _mouseStop: function(event) {},
            _mouseCapture: function(event) {
                return true;
            }
        };

        $.ui.mouse.defaults = {
            cancel: null,
            distance: 1,
            delay: 0
        };

    })(jQuery);
// ]]></script>
<script type="text/javascript">// <![CDATA[
/*
 * jQuery UI Tabs 1.7.2
 *
 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI/Tabs
 *
 * Depends:
 *    ui.core.js
 */
(function($) {

$.widget("ui.tabs", {

    _init: function() {
        if (this.options.deselectable !== undefined) {
            this.options.collapsible = this.options.deselectable;
        }
        this._tabify(true);
    },

    _setData: function(key, value) {
        if (key == 'selected') {
            if (this.options.collapsible && value == this.options.selected) {
                return;
            }
            this.select(value);
        }
        else {
            this.options[key] = value;
            if (key == 'deselectable') {
                this.options.collapsible = value;
            }
            this._tabify();
        }
    },

    _tabId: function(a) {
        return a.title && a.title.replace(/\s/g, '_').replace(/[^A-Za-z0-9\-_:\.]/g, '') ||
            this.options.idPrefix + $.data(a);
    },

    _sanitizeSelector: function(hash) {
        return hash.replace(/:/g, '\\:'); // we need this because an id may contain a ":"
    },

    _cookie: function() {
        var cookie = this.cookie || (this.cookie = this.options.cookie.name || 'ui-tabs-' + $.data(this.list[0]));
        return $.cookie.apply(null, [cookie].concat($.makeArray(arguments)));
    },

    _ui: function(tab, panel) {
        return {
            tab: tab,
            panel: panel,
            index: this.anchors.index(tab)
        };
    },

    _cleanup: function() {
        // restore all former loading tabs labels
        this.lis.filter('.ui-state-processing').removeClass('ui-state-processing')
                .find('span:data(label.tabs)')
                .each(function() {
                    var el = $(this);
                    el.html(el.data('label.tabs')).removeData('label.tabs');
                });
    },

    _tabify: function(init) {

        this.list = this.element.children('ul:first');
        this.lis = $('li:has(a[href])', this.list);
        this.anchors = this.lis.map(function() { return $('a', this)[0]; });
        this.panels = $([]);

        var self = this, o = this.options;

        var fragmentId = /^#.+/; // Safari 2 reports '#' for an empty hash
        this.anchors.each(function(i, a) {
            var href = $(a).attr('href');

            // For dynamically created HTML that contains a hash as href IE < 8 expands
            // such href to the full page url with hash and then misinterprets tab as ajax.
            // Same consideration applies for an added tab with a fragment identifier
            // since a[href=#fragment-identifier] does unexpectedly not match.
            // Thus normalize href attribute...
            var hrefBase = href.split('#')[0], baseEl;
            if (hrefBase && (hrefBase === location.toString().split('#')[0] ||
                    (baseEl = $('base')[0]) && hrefBase === baseEl.href)) {
                href = a.hash;
                a.href = href;
            }

            // inline tab
            if (fragmentId.test(href)) {
                self.panels = self.panels.add(self._sanitizeSelector(href));
            }

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

                // TODO until #3808 is fixed strip fragment identifier from url
                // (IE fails to load from such url)
                $.data(a, 'load.tabs', href.replace(/#.*$/, '')); // mutable data

                var id = self._tabId(a);
                a.href = '#' + id;
                var $panel = $('#' + id);
                if (!$panel.length) {
                    $panel = $(o.panelTemplate).attr('id', id).addClass('ui-tabs-panel ui-widget-content ui-corner-bottom')
                        .insertAfter(self.panels[i - 1] || self.list);
                    $panel.data('destroy.tabs', true);
                }
                self.panels = self.panels.add($panel);
            }

            // invalid tab href
            else {
                o.disabled.push(i);
            }
        });

        // initialization from scratch
        if (init) {

            // attach necessary classes for styling
            this.element.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all');
            this.list.addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
            this.lis.addClass('ui-state-default ui-corner-top');
            this.panels.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom');

            // Selected tab
            // use "selected" option or try to retrieve:
            // 1. from fragment identifier in url
            // 2. from cookie
            // 3. from selected class attribute on <li>
            if (o.selected === undefined) {
                if (location.hash) {
                    this.anchors.each(function(i, a) {
                        if (a.hash == location.hash) {
                            o.selected = i;
                            return false; // break
                        }
                    });
                }
                if (typeof o.selected != 'number' && o.cookie) {
                    o.selected = parseInt(self._cookie(), 10);
                }
                if (typeof o.selected != 'number' && this.lis.filter('.ui-tabs-selected').length) {
                    o.selected = this.lis.index(this.lis.filter('.ui-tabs-selected'));
                }
                o.selected = o.selected || 0;
            }
            else if (o.selected === null) { // usage of null is deprecated, TODO remove in next release
                o.selected = -1;
            }

            // sanity check - default to first tab...
            o.selected = ((o.selected >= 0 && this.anchors[o.selected]) || o.selected < 0) ? o.selected : 0;

            // Take disabling tabs via class attribute from HTML
            // into account and update option properly.
            // A selected tab cannot become disabled.
            o.disabled = $.unique(o.disabled.concat(
                $.map(this.lis.filter('.ui-state-disabled'),
                    function(n, i) { return self.lis.index(n); } )
            )).sort();

            if ($.inArray(o.selected, o.disabled) != -1) {
                o.disabled.splice($.inArray(o.selected, o.disabled), 1);
            }

            // highlight selected tab
            this.panels.addClass('ui-tabs-hide');
            this.lis.removeClass('ui-tabs-selected ui-state-active');
            if (o.selected >= 0 && this.anchors.length) { // check for length avoids error when initializing empty list
                this.panels.eq(o.selected).removeClass('ui-tabs-hide');
                this.lis.eq(o.selected).addClass('ui-tabs-selected ui-state-active');

                // seems to be expected behavior that the show callback is fired
                self.element.queue("tabs", function() {
                    self._trigger('show', null, self._ui(self.anchors[o.selected], self.panels[o.selected]));
                });
                
                this.load(o.selected);
            }

            // clean up to avoid memory leaks in certain versions of IE 6
            $(window).bind('unload', function() {
                self.lis.add(self.anchors).unbind('.tabs');
                self.lis = self.anchors = self.panels = null;
            });

        }
        // update selected after add/remove
        else {
            o.selected = this.lis.index(this.lis.filter('.ui-tabs-selected'));
        }

        // update collapsible
        this.element[o.collapsible ? 'addClass' : 'removeClass']('ui-tabs-collapsible');

        // set or update cookie after init and add/remove respectively
        if (o.cookie) {
            this._cookie(o.selected, o.cookie);
        }

        // disable tabs
        for (var i = 0, li; (li = this.lis[i]); i++) {
            $(li)[$.inArray(i, o.disabled) != -1 &&
                !$(li).hasClass('ui-tabs-selected') ? 'addClass' : 'removeClass']('ui-state-disabled');
        }

        // reset cache if switching from cached to not cached
        if (o.cache === false) {
            this.anchors.removeData('cache.tabs');
        }

        // remove all handlers before, tabify may run on existing tabs after add or option change
        this.lis.add(this.anchors).unbind('.tabs');

        if (o.event != 'mouseover') {
            var addState = function(state, el) {
                if (el.is(':not(.ui-state-disabled)')) {
                    el.addClass('ui-state-' + state);
                }
            };
            var removeState = function(state, el) {
                el.removeClass('ui-state-' + state);
            };
            this.lis.bind('mouseover.tabs', function() {
                addState('hover', $(this));
            });
            this.lis.bind('mouseout.tabs', function() {
                removeState('hover', $(this));
            });
            this.anchors.bind('focus.tabs', function() {
                addState('focus', $(this).closest('li'));
            });
            this.anchors.bind('blur.tabs', function() {
                removeState('focus', $(this).closest('li'));
            });
        }

        // set up animations
        var hideFx, showFx;
        if (o.fx) {
            if ($.isArray(o.fx)) {
                hideFx = o.fx[0];
                showFx = o.fx[1];
            }
            else {
                hideFx = showFx = o.fx;
            }
        }

        // Reset certain styles left over from animation
        // and prevent IE's ClearType bug...
        function resetStyle($el, fx) {
            $el.css({ display: '' });
            if ($.browser.msie && fx.opacity) {
                $el[0].style.removeAttribute('filter');
            }
        }

        // Show a tab...
        var showTab = showFx ?
            function(clicked, $show) {
                $(clicked).closest('li').removeClass('ui-state-default').addClass('ui-tabs-selected ui-state-active');
                $show.hide().removeClass('ui-tabs-hide') // avoid flicker that way
                    .animate(showFx, showFx.duration || 'normal', function() {
                        resetStyle($show, showFx);
                        self._trigger('show', null, self._ui(clicked, $show[0]));
                    });
            } :
            function(clicked, $show) {
                $(clicked).closest('li').removeClass('ui-state-default').addClass('ui-tabs-selected ui-state-active');
                $show.removeClass('ui-tabs-hide');
                self._trigger('show', null, self._ui(clicked, $show[0]));
            };

        // Hide a tab, $show is optional...
        var hideTab = hideFx ?
            function(clicked, $hide) {
                $hide.animate(hideFx, hideFx.duration || 'normal', function() {
                    self.lis.removeClass('ui-tabs-selected ui-state-active').addClass('ui-state-default');
                    $hide.addClass('ui-tabs-hide');
                    resetStyle($hide, hideFx);
                    self.element.dequeue("tabs");
                });
            } :
            function(clicked, $hide, $show) {
                self.lis.removeClass('ui-tabs-selected ui-state-active').addClass('ui-state-default');
                $hide.addClass('ui-tabs-hide');
                self.element.dequeue("tabs");
            };

        // attach tab event handler, unbind to avoid duplicates from former tabifying...
        this.anchors.bind(o.event + '.tabs', function() {
            var el = this, $li = $(this).closest('li'), $hide = self.panels.filter(':not(.ui-tabs-hide)'),
                    $show = $(self._sanitizeSelector(this.hash));

            // If tab is already selected and not collapsible or tab disabled or
            // or is already loading or click callback returns false stop here.
            // Check if click handler returns false last so that it is not executed
            // for a disabled or loading tab!
            if (($li.hasClass('ui-tabs-selected') && !o.collapsible) ||
                $li.hasClass('ui-state-disabled') ||
                $li.hasClass('ui-state-processing') ||
                self._trigger('select', null, self._ui(this, $show[0])) === false) {
                this.blur();
                return false;
            }

            o.selected = self.anchors.index(this);

            self.abort();

            // if tab may be closed
            if (o.collapsible) {
                if ($li.hasClass('ui-tabs-selected')) {
                    o.selected = -1;

                    if (o.cookie) {
                        self._cookie(o.selected, o.cookie);
                    }

                    self.element.queue("tabs", function() {
                        hideTab(el, $hide);
                    }).dequeue("tabs");
                    
                    this.blur();
                    return false;
                }
                else if (!$hide.length) {
                    if (o.cookie) {
                        self._cookie(o.selected, o.cookie);
                    }
                    
                    self.element.queue("tabs", function() {
                        showTab(el, $show);
                    });

                    self.load(self.anchors.index(this)); // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
                    
                    this.blur();
                    return false;
                }
            }

            if (o.cookie) {
                self._cookie(o.selected, o.cookie);
            }

            // show new tab
            if ($show.length) {
                if ($hide.length) {
                    self.element.queue("tabs", function() {
                        hideTab(el, $hide);
                    });
                }
                self.element.queue("tabs", function() {
                    showTab(el, $show);
                });
                
                self.load(self.anchors.index(this));
            }
            else {
                throw 'jQuery UI Tabs: Mismatching fragment identifier.';
            }

            // Prevent IE from keeping other link focussed when using the back button
            // and remove dotted border from clicked link. This is controlled via CSS
            // in modern browsers; blur() removes focus from address bar in Firefox
            // which can become a usability and annoying problem with tabs('rotate').
            if ($.browser.msie) {
                this.blur();
            }

        });

        // disable click in any case
        this.anchors.bind('click.tabs', function(){return false;});

    },

    destroy: function() {
        var o = this.options;

        this.abort();
        
        this.element.unbind('.tabs')
            .removeClass('ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible')
            .removeData('tabs');

        this.list.removeClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');

        this.anchors.each(function() {
            var href = $.data(this, 'href.tabs');
            if (href) {
                this.href = href;
            }
            var $this = $(this).unbind('.tabs');
            $.each(['href', 'load', 'cache'], function(i, prefix) {
                $this.removeData(prefix + '.tabs');
            });
        });

        this.lis.unbind('.tabs').add(this.panels).each(function() {
            if ($.data(this, 'destroy.tabs')) {
                $(this).remove();
            }
            else {
                $(this).removeClass([
                    'ui-state-default',
                    'ui-corner-top',
                    'ui-tabs-selected',
                    'ui-state-active',
                    'ui-state-hover',
                    'ui-state-focus',
                    'ui-state-disabled',
                    'ui-tabs-panel',
                    'ui-widget-content',
                    'ui-corner-bottom',
                    'ui-tabs-hide'
                ].join(' '));
            }
        });

        if (o.cookie) {
            this._cookie(null, o.cookie);
        }
    },

    add: function(url, label, index) {
        if (index === undefined) {
            index = this.anchors.length; // append by default
        }

        var self = this, o = this.options,
            $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label)),
            id = !url.indexOf('#') ? url.replace('#', '') : this._tabId($('a', $li)[0]);

        $li.addClass('ui-state-default ui-corner-top').data('destroy.tabs', true);

        // try to find an existing element before creating a new one
        var $panel = $('#' + id);
        if (!$panel.length) {
            $panel = $(o.panelTemplate).attr('id', id).data('destroy.tabs', true);
        }
        $panel.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide');

        if (index >= this.lis.length) {
            $li.appendTo(this.list);
            $panel.appendTo(this.list[0].parentNode);
        }
        else {
            $li.insertBefore(this.lis[index]);
            $panel.insertBefore(this.panels[index]);
        }

        o.disabled = $.map(o.disabled,
            function(n, i) { return n >= index ? ++n : n; });

        this._tabify();

        if (this.anchors.length == 1) { // after tabify
            $li.addClass('ui-tabs-selected ui-state-active');
            $panel.removeClass('ui-tabs-hide');
            this.element.queue("tabs", function() {
                self._trigger('show', null, self._ui(self.anchors[0], self.panels[0]));
            });
                
            this.load(0);
        }

        // callback
        this._trigger('add', null, this._ui(this.anchors[index], this.panels[index]));
    },

    remove: function(index) {
        var o = this.options, $li = this.lis.eq(index).remove(),
            $panel = this.panels.eq(index).remove();

        // If selected tab was removed focus tab to the right or
        // in case the last tab was removed the tab to the left.
        if ($li.hasClass('ui-tabs-selected') && this.anchors.length > 1) {
            this.select(index + (index + 1 < this.anchors.length ? 1 : -1));
        }

        o.disabled = $.map($.grep(o.disabled, function(n, i) { return n != index; }),
            function(n, i) { return n >= index ? --n : n; });

        this._tabify();

        // callback
        this._trigger('remove', null, this._ui($li.find('a')[0], $panel[0]));
    },

    enable: function(index) {
        var o = this.options;
        if ($.inArray(index, o.disabled) == -1) {
            return;
        }

        this.lis.eq(index).removeClass('ui-state-disabled');
        o.disabled = $.grep(o.disabled, function(n, i) { return n != index; });

        // callback
        this._trigger('enable', null, this._ui(this.anchors[index], this.panels[index]));
    },

    disable: function(index) {
        var self = this, o = this.options;
        if (index != o.selected) { // cannot disable already selected tab
            this.lis.eq(index).addClass('ui-state-disabled');

            o.disabled.push(index);
            o.disabled.sort();

            // callback
            this._trigger('disable', null, this._ui(this.anchors[index], this.panels[index]));
        }
    },

    select: function(index) {
        if (typeof index == 'string') {
            index = this.anchors.index(this.anchors.filter('[href$=' + index + ']'));
        }
        else if (index === null) { // usage of null is deprecated, TODO remove in next release
            index = -1;
        }
        if (index == -1 && this.options.collapsible) {
            index = this.options.selected;
        }

        this.anchors.eq(index).trigger(this.options.event + '.tabs');
    },

    load: function(index) {
        var self = this, o = this.options, a = this.anchors.eq(index)[0], url = $.data(a, 'load.tabs');

        this.abort();

        // not remote or from cache
        if (!url || this.element.queue("tabs").length !== 0 && $.data(a, 'cache.tabs')) {
            this.element.dequeue("tabs");
            return;
        }

        // load remote from here on
        this.lis.eq(index).addClass('ui-state-processing');

        if (o.spinner) {
            var span = $('span', a);
            span.data('label.tabs', span.html()).html(o.spinner);
        }

        this.xhr = $.ajax($.extend({}, o.ajaxOptions, {
            url: url,
            success: function(r, s) {
                $(self._sanitizeSelector(a.hash)).html(r);

                // take care of tab labels
                self._cleanup();

                if (o.cache) {
                    $.data(a, 'cache.tabs', true); // if loaded once do not load them again
                }

                // callbacks
                self._trigger('load', null, self._ui(self.anchors[index], self.panels[index]));
                try {
                    o.ajaxOptions.success(r, s);
                }
                catch (e) {}

                // last, so that load event is fired before show...
                self.element.dequeue("tabs");
            }
        }));
    },

    abort: function() {
        // stop possibly running animations
        this.element.queue([]);
        this.panels.stop(false, true);

        // terminate pending requests from other tabs
        if (this.xhr) {
            this.xhr.abort();
            delete this.xhr;
        }

        // take care of tab labels
        this._cleanup();

    },

    url: function(index, url) {
        this.anchors.eq(index).removeData('cache.tabs').data('load.tabs', url);
    },

    length: function() {
        return this.anchors.length;
    }

});

$.extend($.ui.tabs, {
    version: '1.7.2',
    getter: 'length',
    defaults: {
        ajaxOptions: null,
        cache: false,
        cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
        collapsible: false,
        disabled: [],
        event: 'click',
        fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
        idPrefix: 'ui-tabs-',
        panelTemplate: '<div></div>',
        spinner: '<em>Loading&#8230;</em>',
        tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'
    }
});

/*
 * Tabs Extensions
 */

/*
 * Rotate
 */
$.extend($.ui.tabs.prototype, {
    rotation: null,
    rotate: function(ms, continuing) {

        var self = this, o = this.options;
        
        var rotate = self._rotate || (self._rotate = function(e) {
            clearTimeout(self.rotation);
            self.rotation = setTimeout(function() {
                var t = o.selected;
                self.select( ++t < self.anchors.length ? t : 0 );
            }, ms);
            
            if (e) {
                e.stopPropagation();
            }
        });
        
        var stop = self._unrotate || (self._unrotate = !continuing ?
            function(e) {
                if (e.clientX) { // in case of a true click
                    self.rotate(null);
                }
            } :
            function(e) {
                t = o.selected;
                rotate();
            });

        // start rotation
        if (ms) {
            this.element.bind('tabsshow', rotate);
            this.anchors.bind(o.event + '.tabs', stop);
            rotate();
        }
        // stop rotation
        else {
            clearTimeout(self.rotation);
            this.element.unbind('tabsshow', rotate);
            this.anchors.unbind(o.event + '.tabs', stop);
            delete this._rotate;
            delete this._unrotate;
        }
    }
});

})(jQuery);
// ]]></script>
<script type="text/javascript">// <![CDATA[
    $(function() {
        $( "#tabs" ).tabs();
    });
// ]]></script>
<div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</div>

 

For Accordion Widget:

 

<style><!--
    .ui-accordion-content{
        height:200px;
    }
--></style>
<script type="text/javascript">// <![CDATA[
/*
 * jQuery UI 1.7.2
 *
 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI
 */
    ;
    jQuery.ui || (function($) {

        var _remove = $.fn.remove,
            isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);

        //Helper functions and ui object
        $.ui = {
            version: "1.7.2",

            // $.ui.plugin is deprecated.  Use the proxy pattern instead.
            plugin: {
                add: function(module, option, set) {
                    var proto = $.ui[module].prototype;
                    for (var i in set) {
                        proto.plugins[i] = proto.plugins[i] || [];
                        proto.plugins[i].push([option, set[i]]);
                    }
                },
                call: function(instance, name, args) {
                    var set = instance.plugins[name];
                    if (!set || !instance.element[0].parentNode) {
                        return;
                    }

                    for (var i = 0; i < set.length; i++) {
                        if (instance.options[set[i][0]]) {
                            set[i][1].apply(instance.element, args);
                        }
                    }
                }
            },

            contains: function(a, b) {
                return document.compareDocumentPosition ? a.compareDocumentPosition(b) & 16 : a !== b && a.contains(b);
            },

            hasScroll: function(el, a) {

                //If overflow is hidden, the element might have extra content, but the user wants to hide it
                if ($(el).css('overflow') == 'hidden') {
                    return false;
                }

                var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',
                    has = false;

                if (el[scroll] > 0) {
                    return true;
                }

                // TODO: determine which cases actually cause this to happen
                // if the element doesn't have the scroll set, see if it's possible to
                // set the scroll
                el[scroll] = 1;
                has = (el[scroll] > 0);
                el[scroll] = 0;
                return has;
            },

            isOverAxis: function(x, reference, size) {
                //Determines when x coordinate is over "b" element axis
                return (x > reference) && (x < (reference + size));
            },

            isOver: function(y, x, top, left, height, width) {
                //Determines when x, y coordinates is over "b" element
                return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
            },

            keyCode: {
                BACKSPACE: 8,
                CAPS_LOCK: 20,
                COMMA: 188,
                CONTROL: 17,
                DELETE: 46,
                DOWN: 40,
                END: 35,
                ENTER: 13,
                ESCAPE: 27,
                HOME: 36,
                INSERT: 45,
                LEFT: 37,
                NUMPAD_ADD: 107,
                NUMPAD_DECIMAL: 110,
                NUMPAD_DIVIDE: 111,
                NUMPAD_ENTER: 108,
                NUMPAD_MULTIPLY: 106,
                NUMPAD_SUBTRACT: 109,
                PAGE_DOWN: 34,
                PAGE_UP: 33,
                PERIOD: 190,
                RIGHT: 39,
                SHIFT: 16,
                SPACE: 32,
                TAB: 9,
                UP: 38
            }
        };

        // WAI-ARIA normalization
        if (isFF2) {
            var attr = $.attr,
                removeAttr = $.fn.removeAttr,
                ariaNS = "http://www.w3.org/2005/07/aaa",
                ariaState = /^aria-/,
                ariaRole = /^wairole:/;

            $.attr = function(elem, name, value) {
                var set = value !== undefined;

                return (name == 'role' ? (set ? attr.call(this, elem, name, "wairole:" + value) : (attr.apply(this, arguments) || "").replace(ariaRole, "")) : (ariaState.test(name) ? (set ? elem.setAttributeNS(ariaNS, name.replace(ariaState, "aaa:"), value) : attr.call(this, elem, name.replace(ariaState, "aaa:"))) : attr.apply(this, arguments)));
            };

            $.fn.removeAttr = function(name) {
                return (ariaState.test(name) ? this.each(function() {
                    this.removeAttributeNS(ariaNS, name.replace(ariaState, ""));
                }) : removeAttr.call(this, name));
            };
        }

        //jQuery plugins
        $.fn.extend({
            remove: function() {
                // Safari has a native remove event which actually removes DOM elements,
                // so we have to use triggerHandler instead of trigger (#3037).
                $("*", this).add(this).each(function() {
                    $(this).triggerHandler("remove");
                });
                return _remove.apply(this, arguments);
            },

            enableSelection: function() {
                return this.attr('unselectable', 'off').css('MozUserSelect', '').unbind('selectstart.ui');
            },

            disableSelection: function() {
                return this.attr('unselectable', 'on').css('MozUserSelect', 'none').bind('selectstart.ui', function() {
                    return false;
                });
            },

            scrollParent: function() {
                var scrollParent;
                if (($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
                    scrollParent = this.parents().filter(function() {
                        return (/(relative|absolute|fixed)/).test($.curCSS(this, 'position', 1)) && (/(auto|scroll)/).test($.curCSS(this, 'overflow', 1) + $.curCSS(this, 'overflow-y', 1) + $.curCSS(this, 'overflow-x', 1));
                    }).eq(0);
                } else {
                    scrollParent = this.parents().filter(function() {
                        return (/(auto|scroll)/).test($.curCSS(this, 'overflow', 1) + $.curCSS(this, 'overflow-y', 1) + $.curCSS(this, 'overflow-x', 1));
                    }).eq(0);
                }

                return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
            }
        });


        //Additional selectors
        $.extend($.expr[':'], {
            data: function(elem, i, match) {
                return !!$.data(elem, match[3]);
            },

            focusable: function(element) {
                var nodeName = element.nodeName.toLowerCase(),
                    tabIndex = $.attr(element, 'tabindex');
                return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex))
                // the element and all of its ancestors must be visible
                // the browser may report that the area is hidden
                && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
            },

            tabbable: function(element) {
                var tabIndex = $.attr(element, 'tabindex');
                return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
            }
        });


        // $.widget is a factory to create jQuery plugins
        // taking some boilerplate code out of the plugin code

        function getter(namespace, plugin, method, args) {
            function getMethods(type) {
                var methods = $[namespace][plugin][type] || [];
                return (typeof methods == 'string' ? methods.split(/,?\s+/) : methods);
            }

            var methods = getMethods('getter');
            if (args.length == 1 && typeof args[0] == 'string') {
                methods = methods.concat(getMethods('getterSetter'));
            }
            return ($.inArray(method, methods) != -1);
        }

        $.widget = function(name, prototype) {
            var namespace = name.split(".")[0];
            name = name.split(".")[1];

            // create plugin method
            $.fn[name] = function(options) {
                var isMethodCall = (typeof options == 'string'),
                    args = Array.prototype.slice.call(arguments, 1);

                // prevent calls to internal methods
                if (isMethodCall && options.substring(0, 1) == '_') {
                    return this;
                }

                // handle getter methods
                if (isMethodCall && getter(namespace, name, options, args)) {
                    var instance = $.data(this[0], name);
                    return (instance ? instance[options].apply(instance, args) : undefined);
                }

                // handle initialization and non-getter methods
                return this.each(function() {
                    var instance = $.data(this, name);

                    // constructor
                    (!instance && !isMethodCall && $.data(this, name, new $[namespace][name](this, options))._init());

                    // method call
                    (instance && isMethodCall && $.isFunction(instance[options]) && instance[options].apply(instance, args));
                });
            };

            // create widget constructor
            $[namespace] = $[namespace] || {};
            $[namespace][name] = function(element, options) {
                var self = this;

                this.namespace = namespace;
                this.widgetName = name;
                this.widgetEventPrefix = $[namespace][name].eventPrefix || name;
                this.widgetBaseClass = namespace + '-' + name;

                this.options = $.extend({}, $.widget.defaults, $[namespace][name].defaults, $.metadata && $.metadata.get(element)[name], options);

                this.element = $(element).bind('setData.' + name, function(event, key, value) {
                    if (event.target == element) {
                        return self._setData(key, value);
                    }
                }).bind('getData.' + name, function(event, key) {
                    if (event.target == element) {
                        return self._getData(key);
                    }
                }).bind('remove', function() {
                    return self.destroy();
                });
            };

            // add widget prototype
            $[namespace][name].prototype = $.extend({}, $.widget.prototype, prototype);

            // TODO: merge getter and getterSetter properties from widget prototype
            // and plugin prototype
            $[namespace][name].getterSetter = 'option';
        };

        $.widget.prototype = {
            _init: function() {},
            destroy: function() {
                this.element.removeData(this.widgetName).removeClass(this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled').removeAttr('aria-disabled');
            },

            option: function(key, value) {
                var options = key,
                    self = this;

                if (typeof key == "string") {
                    if (value === undefined) {
                        return this._getData(key);
                    }
                    options = {};
                    options[key] = value;
                }

                $.each(options, function(key, value) {
                    self._setData(key, value);
                });
            },
            _getData: function(key) {
                return this.options[key];
            },
            _setData: function(key, value) {
                this.options[key] = value;

                if (key == 'disabled') {
                    this.element[value ? 'addClass' : 'removeClass'](
                    this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled').attr("aria-disabled", value);
                }
            },

            enable: function() {
                this._setData('disabled', false);
            },
            disable: function() {
                this._setData('disabled', true);
            },

            _trigger: function(type, event, data) {
                var callback = this.options[type],
                    eventName = (type == this.widgetEventPrefix ? type : this.widgetEventPrefix + type);

                event = $.Event(event);
                event.type = eventName;

                // copy original event properties over to the new event
                // this would happen if we could call $.event.fix instead of $.Event
                // but we don't have a way to force an event to be fixed multiple times
                if (event.originalEvent) {
                    for (var i = $.event.props.length, prop; i;) {
                        prop = $.event.props[--i];
                        event[prop] = event.originalEvent[prop];
                    }
                }

                this.element.trigger(event, data);

                return !($.isFunction(callback) && callback.call(this.element[0], event, data) === false || event.isDefaultPrevented());
            }
        };

        $.widget.defaults = {
            disabled: false
        };


        /** Mouse Interaction Plugin **/

        $.ui.mouse = {
            _mouseInit: function() {
                var self = this;

                this.element.bind('mousedown.' + this.widgetName, function(event) {
                    return self._mouseDown(event);
                }).bind('click.' + this.widgetName, function(event) {
                    if (self._preventClickEvent) {
                        self._preventClickEvent = false;
                        event.stopImmediatePropagation();
                        return false;
                    }
                });

                // Prevent text selection in IE
                if ($.browser.msie) {
                    this._mouseUnselectable = this.element.attr('unselectable');
                    this.element.attr('unselectable', 'on');
                }

                this.started = false;
            },

            // TODO: make sure destroying one instance of mouse doesn't mess with
            // other instances of mouse
            _mouseDestroy: function() {
                this.element.unbind('.' + this.widgetName);

                // Restore text selection in IE
                ($.browser.msie && this.element.attr('unselectable', this._mouseUnselectable));
            },

            _mouseDown: function(event) {
                // don't let more than one widget handle mouseStart
                // TODO: figure out why we have to use originalEvent
                event.originalEvent = event.originalEvent || {};
                if (event.originalEvent.mouseHandled) {
                    return;
                }

                // we may have missed mouseup (out of window)
                (this._mouseStarted && this._mouseUp(event));

                this._mouseDownEvent = event;

                var self = this,
                    btnIsLeft = (event.which == 1),
                    elIsCancel = (typeof this.options.cancel == "string" ? $(event.target).parents().add(event.target).filter(this.options.cancel).length : false);
                if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
                    return true;
                }

                this.mouseDelayMet = !this.options.delay;
                if (!this.mouseDelayMet) {
                    this._mouseDelayTimer = setTimeout(function() {
                        self.mouseDelayMet = true;
                    }, this.options.delay);
                }

                if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
                    this._mouseStarted = (this._mouseStart(event) !== false);
                    if (!this._mouseStarted) {
                        event.preventDefault();
                        return true;
                    }
                }

                // these delegates are required to keep context
                this._mouseMoveDelegate = function(event) {
                    return self._mouseMove(event);
                };
                this._mouseUpDelegate = function(event) {
                    return self._mouseUp(event);
                };
                $(document).bind('mousemove.' + this.widgetName, this._mouseMoveDelegate).bind('mouseup.' + this.widgetName, this._mouseUpDelegate);

                // preventDefault() is used to prevent the selection of text here -
                // however, in Safari, this causes select boxes not to be selectable
                // anymore, so this fix is needed
                ($.browser.safari || event.preventDefault());

                event.originalEvent.mouseHandled = true;
                return true;
            },

            _mouseMove: function(event) {
                // IE mouseup check - mouseup happened when mouse was out of window
                if ($.browser.msie && document.documentMode < 9 && !event.button) {
                    return this._mouseUp(event);
                }

                if (this._mouseStarted) {
                    this._mouseDrag(event);
                    return event.preventDefault();
                }

                if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
                    this._mouseStarted = (this._mouseStart(this._mouseDownEvent, event) !== false);
                    (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
                }

                return !this._mouseStarted;
            },

            _mouseUp: function(event) {
                $(document).unbind('mousemove.' + this.widgetName, this._mouseMoveDelegate).unbind('mouseup.' + this.widgetName, this._mouseUpDelegate);

                if (this._mouseStarted) {
                    this._mouseStarted = false;
                    this._preventClickEvent = (event.target == this._mouseDownEvent.target);
                    this._mouseStop(event);
                }

                return false;
            },

            _mouseDistanceMet: function(event) {
                return (Math.max(
                Math.abs(this._mouseDownEvent.pageX - event.pageX), Math.abs(this._mouseDownEvent.pageY - event.pageY)) >= this.options.distance);
            },

            _mouseDelayMet: function(event) {
                return this.mouseDelayMet;
            },

            // These are placeholder methods, to be overriden by extending plugin
            _mouseStart: function(event) {},
            _mouseDrag: function(event) {},
            _mouseStop: function(event) {},
            _mouseCapture: function(event) {
                return true;
            }
        };

        $.ui.mouse.defaults = {
            cancel: null,
            distance: 1,
            delay: 0
        };

    })(jQuery);
// ]]></script>
<script type="text/javascript">// <![CDATA[
    (function($) {

        $.widget("ui.accordion", {

            _init: function() {

                var o = this.options,
                    self = this;
                this.running = 0;

                // if the user set the alwaysOpen option on init
                // then we need to set the collapsible option
                // if they set both on init, collapsible will take priority
                if (o.collapsible == $.ui.accordion.defaults.collapsible && o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) {
                    o.collapsible = !o.alwaysOpen;
                }

                if (o.navigation) {
                    var current = this.element.find("a").filter(o.navigationFilter);
                    if (current.length) {
                        if (current.filter(o.header).length) {
                            this.active = current;
                        } else {
                            this.active = current.parent().parent().prev();
                            current.addClass("ui-accordion-content-active");
                        }
                    }
                }

                this.element.addClass("ui-accordion ui-widget ui-helper-reset");

                // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
                if (this.element[0].nodeName == "UL") {
                    this.element.children("li").addClass("ui-accordion-li-fix");
                }

                this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all").bind("mouseenter.accordion", function() {
                    $(this).addClass('ui-state-hover');
                }).bind("mouseleave.accordion", function() {
                    $(this).removeClass('ui-state-hover');
                }).bind("focus.accordion", function() {
                    $(this).addClass('ui-state-focus');
                }).bind("blur.accordion", function() {
                    $(this).removeClass('ui-state-focus');
                });

                this.headers.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");

                this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
                this.active.next().addClass('ui-accordion-content-active');

                //Append icon elements
                $("<span />").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
                this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);

                // IE7-/Win - Extra vertical space in lists fixed
                if ($.browser.msie) {
                    this.element.find('a').css('zoom', '1');
                }

                this.resize();

                //ARIA
                this.element.attr('role', 'tablist');

                this.headers.attr('role', 'tab').bind('keydown', function(event) {
                    return self._keydown(event);
                }).next().attr('role', 'tabpanel');

                this.headers.not(this.active || "").attr('aria-expanded', 'false').attr("tabIndex", "-1").next().hide();

                // make sure at least one header is in the tab order
                if (!this.active.length) {
                    this.headers.eq(0).attr('tabIndex', '0');
                } else {
                    this.active.attr('aria-expanded', 'true').attr('tabIndex', '0');
                }

                // only need links in taborder for Safari
                if (!$.browser.safari) this.headers.find('a').attr('tabIndex', '-1');

                if (o.event) {
                    this.headers.bind((o.event) + ".accordion", function(event) {
                        return self._clickHandler.call(self, event, this);
                    });
                }

            },

            destroy: function() {
                var o = this.options;

                this.element.removeClass("ui-accordion ui-widget ui-helper-reset").removeAttr("role").unbind('.accordion').removeData('accordion');

                this.headers.unbind(".accordion").removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top").removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");

                this.headers.find("a").removeAttr("tabindex");
                this.headers.children(".ui-icon").remove();
                var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active");
                if (o.autoHeight || o.fillHeight) {
                    contents.css("height", "");
                }
            },

            _setData: function(key, value) {
                if (key == 'alwaysOpen') {
                    key = 'collapsible';
                    value = !value;
                }
                $.widget.prototype._setData.apply(this, arguments);
            },

            _keydown: function(event) {

                var o = this.options,
                    keyCode = $.ui.keyCode;

                if (o.disabled || event.altKey || event.ctrlKey) return;

                var length = this.headers.length;
                var currentIndex = this.headers.index(event.target);
                var toFocus = false;

                switch (event.keyCode) {
                case keyCode.RIGHT:
                case keyCode.DOWN:
                    toFocus = this.headers[(currentIndex + 1) % length];
                    break;
                case keyCode.LEFT:
                case keyCode.UP:
                    toFocus = this.headers[(currentIndex - 1 + length) % length];
                    break;
                case keyCode.SPACE:
                case keyCode.ENTER:
                    return this._clickHandler({
                        target: event.target
                    }, event.target);
                }

                if (toFocus) {
                    $(event.target).attr('tabIndex', '-1');
                    $(toFocus).attr('tabIndex', '0');
                    toFocus.focus();
                    return false;
                }

                return true;

            },

            resize: function() {

                var o = this.options,
                    maxHeight;

                if (o.fillSpace) {

                    if ($.browser.msie) {
                        var defOverflow = this.element.parent().css('overflow');
                        this.element.parent().css('overflow', 'hidden');
                    }
                    maxHeight = this.element.parent().height();
                    if ($.browser.msie) {
                        this.element.parent().css('overflow', defOverflow);
                    }

                    this.headers.each(function() {
                        maxHeight -= $(this).outerHeight();
                    });

                    var maxPadding = 0;
                    this.headers.next().each(function() {
                        maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
                    }).height(Math.max(0, maxHeight - maxPadding)).css('overflow', 'auto');

                } else if (o.autoHeight) {
                    maxHeight = 0;
                    this.headers.next().each(function() {
                        maxHeight = Math.max(maxHeight, $(this).outerHeight());
                    }).height(maxHeight);
                }

            },

            activate: function(index) {
                // call clickHandler with custom event
                var active = this._findActive(index)[0];
                this._clickHandler({
                    target: active
                }, active);
            },

            _findActive: function(selector) {
                return selector ? typeof selector == "number" ? this.headers.filter(":eq(" + selector + ")") : this.headers.not(this.headers.not(selector)) : selector === false ? $([]) : this.headers.filter(":eq(0)");
            },

            _clickHandler: function(event, target) {

                var o = this.options;
                if (o.disabled) return false;

                // called only when using activate(false) to close all parts programmatically
                if (!event.target && o.collapsible) {
                    this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all").find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
                    this.active.next().addClass('ui-accordion-content-active');
                    var toHide = this.active.next(),
                        data = {
                            options: o,
                            newHeader: $([]),
                            oldHeader: o.active,
                            newContent: $([]),
                            oldContent: toHide
                        },
                        toShow = (this.active = $([]));
                    this._toggle(toShow, toHide, data);
                    return false;
                }

                // get the click target
                var clicked = $(event.currentTarget || target);
                var clickedIsActive = clicked[0] == this.active[0];

                // if animations are still active, or the active header is the target, ignore click
                if (this.running || (!o.collapsible && clickedIsActive)) {
                    return false;
                }

                // switch classes
                this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all").find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
                this.active.next().addClass('ui-accordion-content-active');
                if (!clickedIsActive) {
                    clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top").find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
                    clicked.next().addClass('ui-accordion-content-active');
                }

                // find elements to show and hide
                var toShow = clicked.next(),
                    toHide = this.active.next(),
                    data = {
                        options: o,
                        newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
                        oldHeader: this.active,
                        newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
                        oldContent: toHide.find('> *')
                    },
                    down = this.headers.index(this.active[0]) > this.headers.index(clicked[0]);

                this.active = clickedIsActive ? $([]) : clicked;
                this._toggle(toShow, toHide, data, clickedIsActive, down);

                return false;

            },

            _toggle: function(toShow, toHide, data, clickedIsActive, down) {

                var o = this.options,
                    self = this;

                this.toShow = toShow;
                this.toHide = toHide;
                this.data = data;

                var complete = function() {
                        if (!self) return;
                        return self._completed.apply(self, arguments);
                    };

                // trigger changestart event
                this._trigger("changestart", null, this.data);

                // count elements to animate
                this.running = toHide.size() === 0 ? toShow.size() : toHide.size();

                if (o.animated) {

                    var animOptions = {};

                    if (o.collapsible && clickedIsActive) {
                        animOptions = {
                            toShow: $([]),
                            toHide: toHide,
                            complete: complete,
                            down: down,
                            autoHeight: o.autoHeight || o.fillSpace
                        };
                    } else {
                        animOptions = {
                            toShow: toShow,
                            toHide: toHide,
                            complete: complete,
                            down: down,
                            autoHeight: o.autoHeight || o.fillSpace
                        };
                    }

                    if (!o.proxied) {
                        o.proxied = o.animated;
                    }

                    if (!o.proxiedDuration) {
                        o.proxiedDuration = o.duration;
                    }

                    o.animated = $.isFunction(o.proxied) ? o.proxied(animOptions) : o.proxied;

                    o.duration = $.isFunction(o.proxiedDuration) ? o.proxiedDuration(animOptions) : o.proxiedDuration;

                    var animations = $.ui.accordion.animations,
                        duration = o.duration,
                        easing = o.animated;

                    if (!animations[easing]) {
                        animations[easing] = function(options) {
                            this.slide(options, {
                                easing: easing,
                                duration: duration || 700
                            });
                        };
                    }

                    animations[easing](animOptions);

                } else {

                    if (o.collapsible && clickedIsActive) {
                        toShow.toggle();
                    } else {
                        toHide.hide();
                        toShow.show();
                    }

                    complete(true);

                }

                toHide.prev().attr('aria-expanded', 'false').attr("tabIndex", "-1").blur();
                toShow.prev().attr('aria-expanded', 'true').attr("tabIndex", "0").focus();

            },

            _completed: function(cancel) {

                var o = this.options;

                this.running = cancel ? 0 : --this.running;
                if (this.running) return;

                if (o.clearStyle) {
                    this.toShow.add(this.toHide).css({
                        height: "",
                        overflow: ""
                    });
                }

                this._trigger('change', null, this.data);
            }

        });


        $.extend($.ui.accordion, {
            version: "1.7.2",
            defaults: {
                active: null,
                alwaysOpen: true,
                //deprecated, use collapsible
                animated: 'slide',
                autoHeight: true,
                clearStyle: false,
                collapsible: false,
                event: "click",
                fillSpace: false,
                header: "> li > :first-child,> :not(li):even",
                icons: {
                    header: "ui-icon-triangle-1-e",
                    headerSelected: "ui-icon-triangle-1-s"
                },
                navigation: false,
                navigationFilter: function() {
                    return this.href.toLowerCase() == location.href.toLowerCase();
                }
            },
            animations: {
                slide: function(options, additions) {
                    options = $.extend({
                        easing: "swing",
                        duration: 300
                    }, options, additions);
                    if (!options.toHide.size()) {
                        options.toShow.animate({
                            height: "show"
                        }, options);
                        return;
                    }
                    if (!options.toShow.size()) {
                        options.toHide.animate({
                            height: "hide"
                        }, options);
                        return;
                    }
                    var overflow = options.toShow.css('overflow'),
                        percentDone, showProps = {},
                        hideProps = {},
                        fxAttrs = ["height", "paddingTop", "paddingBottom"],
                        originalWidth;
                    // fix width before calculating height of hidden element
                    var s = options.toShow;
                    originalWidth = s[0].style.width;
                    s.width(parseInt(s.parent().width(), 10) - parseInt(s.css("paddingLeft"), 10) - parseInt(s.css("paddingRight"), 10) - (parseInt(s.css("borderLeftWidth"), 10) || 0) - (parseInt(s.css("borderRightWidth"), 10) || 0));

                    $.each(fxAttrs, function(i, prop) {
                        hideProps[prop] = 'hide';

                        var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/);
                        showProps[prop] = {
                            value: parts[1],
                            unit: parts[2] || 'px'
                        };
                    });
                    options.toShow.css({
                        height: 0,
                        overflow: 'hidden'
                    }).show();
                    options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps, {
                        step: function(now, settings) {
                            // only calculate the percent when animating height
                            // IE gets very inconsistent results when animating elements
                            // with small values, which is common for padding
                            if (settings.prop == 'height') {
                                percentDone = (settings.now - settings.start) / (settings.end - settings.start);
                            }

                            options.toShow[0].style[settings.prop] = (percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit;
                        },
                        duration: options.duration,
                        easing: options.easing,
                        complete: function() {
                            if (!options.autoHeight) {
                                options.toShow.css("height", "");
                            }
                            options.toShow.css("width", originalWidth);
                            options.toShow.css({
                                overflow: overflow
                            });
                            options.complete();
                        }
                    });
                },
                bounceslide: function(options) {
                    this.slide(options, {
                        easing: options.down ? "easeOutBounce" : "swing",
                        duration: options.down ? 1000 : 200
                    });
                },
                easeslide: function(options) {
                    this.slide(options, {
                        easing: "easeinout",
                        duration: 700
                    });
                }
            }
        });

    })(jQuery);
// ]]></script>
<script type="text/javascript">// <![CDATA[
    $(function() {
        $("#accordion").accordion();
    });
// ]]></script>
<div>
<div id="accordion" style="height: 600px;">
<h3><a href="#"> Section 1 </a></h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida                 in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.                 Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3><a href="#"> Section 2 </a></h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet,                 mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
</div>
<h3><a href="#"> Section 3 </a></h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean                 in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante                 aliquam nisi, eu iaculis leo purus venenatis dui.</p>
<ul>
<li> List item one </li>
<li> List item two </li>
<li> List item three </li>
</ul>
</div>
<h3><a href="#"> Section 4 </a></h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante                 ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent                 per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
</div>

 

 As you can see from the above examples, pasting the js in a block using script tags creates a monster.  It would be far better to just call the js file, but it would be nice to have a special section to do that.

 
Recommended by
 
 
Comments
·Oldest
·Top
Please login to post a comment.
zugul
This is a good idea to create harmony in the navigation
DRautenbach
I think this would be an awsome idea too.
AlexT
There are several solutions to this:
1) You can insert link to js file, but not the content of the js file. But it will not be cached.
2) Use PHP block and insert code like, this:

$GLOBALS['oSysTemplate']->addJs('jquery-ui.js');
return " HTML code with tabs or other UI elements";
houstonlively
What I was asking for, was something that the average Dolphin user could do in page builder.
AlexT
I believe that average Dolphin users don't require this.
Advanced users can use one of the techniques I described before.
houstonlively
I just discovered a mod by Deano, Head Injections, that makes this all really easy, so I take back this request.
csampson1
If it's not an option they indeed can't do it... I have wanted this option since day one... Lead them to the option and they will take it... IMHO...
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.
PET:0.054540157318115