/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/************************************************************************************************************* * This source file is subject to the End User License Agreement (EULA) that * is bundled with this package in the file LICENSE.txt. It is also available * through the world-wide-web at this URL: http://www.ontic.com.au/license.html * If you did not receive a copy of the license and are unable to obtain it through * the world-wide-web, please send an email to [email protected] immediately. * Copyright (c) 2010, Ontic (http://www.ontic.com.au). All rights reserved. * Redistributions of files must retain the above copyright notice. * * @id $Id$ * @license see LICENSE.txt * @author see AUTHORS.txt * @copyright see COPYRIGHT.txt * @category Magento * @package ontic * @subpackage default * @since Ontic(TM) * @version $Revision$ * @modifiedby $LastChangedBy$ * @lastmodified $Date$ ************************************************************************************************************/ /** * Example Usage: * * jQuery(document).ready( * function($) * { * $("div#drawer").collapsible( * { * startHidden: true, * trackState: true, * updateText: false, * triggerElement: "a#collapse-container-link", * expandDuration: "500", * collapseDuration: "500" * } * ); * } * ); */ /** * Jquery Collapsible Plugin */ (function($) { // Chained function for creating collapsible element(s). $.fn.collapsible = function(options) { // Attach collapsible functionality to jQuery object(s). return collapsible.init(this, options); }; // Default options. $.fn.collapsible.defaults = { startHidden: false, trackState: false, updateText: true, updateClass: true, triggerTag: "<div/>", triggerElement: "", expandClass: "expand", collapseClass: "collapse", textElement: "", expandText: "open", collapseText: "close", expandAnimation: {height: "show"}, collapseAnimation: {height: "hide"}, expandDuration: 0, collapseDuration: 0, expandEasing: "swing", collapseEasing: "swing", beforeExpand: null, beforeCollapse: null, afterExpand: null, afterCollapse: null, cookieExpires: 365, cookiePrefix: "collapsible", }; // Private data and functions. var collapsible = { // Attach collapsible functionality to given elements. init: function(elements, options) { // Merge the default options with user defined options. options = $.extend({}, $.fn.collapsible.defaults, options); // Loop through each of the collapsible elements. elements.each( function() { // The cookie name used for tracking the elements collapsed state. var cookieName = null; // Check if the element has a unique identifier to prevent cookie name collisions. if (this.id) { cookieName = options.cookiePrefix + "_" + this.id; } // If tracking the collapsed state is enabled and a cookie name is set. if (options.trackState && cookieName) { // If a cookie has not yet been created for this element. if ($.cookie(cookieName) == undefined) { // If the element should be hidden by default. if (options.startHidden) { // Set the cookie value as collapsed. $.cookie(cookieName, "collapsed"); } else { // Set the cookie value as expanded. $.cookie(cookieName, "expanded"); } } // If the cookie value is set to collapsed. if ($.cookie(cookieName) == "collapsed") { // Hide the element. $(this).hide(); } } // If cookie tracking is not enabled, but the element should be hidden by default. else if (options.startHidden) { // Hide the element. $(this).hide(); } // Whether or not the element is hidden. var hidden = $(this).is(":hidden"); // Set the text based on visibility. var updateText = (hidden ? options.expandText : options.collapseText); // Set the added class based on visibility. var addClass = (hidden ? options.expandClass : options.collapseClass); // Set the removed class based on visibility. var removeClass = (hidden ? options.collapseClass : options.expandClass); // If a trigger element was not specified, we need to create one. if (!options.triggerElement.length) { // Create the trigger link. var triggerLink = $("<a/>").attr({"href": "javascript:void(0)", "title": updateText}); // Create the trigger element. var triggerElement = $(options.triggerTag).append(triggerLink); // Assign the new text if updateText is enabled. if (options.updateText) { triggerElement.children().text(updateText); } // Assign the new class if updateClass is enabled. if (options.updateClass) { triggerElement.removeClass(removeClass).addClass(addClass); } // Bind to the click event. triggerElement.bind('click', { options: options, trigger: triggerElement, cookie: cookieName, text: triggerElement.children(), target: $(this) }, function(event) { return collapsible.onClick(event); } ); // Append the trigger element to the DOM. $(this).after(triggerElement); } // An trigger element has been given. else { // If the trigger element is a string, set it as an object. if (typeof options.triggerElement == "string") { options.triggerElement = $(options.triggerElement); } // If the text element is a string, set it as an object. if (options.textElement.length && typeof options.textElement == "string") { options.textElement = $(options.textElement); } // Assign textElement to triggerElement if not set. var textElement = ((options.textElement.length) ? options.textElement : options.triggerElement); // Assign the new text if updateText is enabled. if (options.updateText) { textElement.text(updateText); } // Assign the new class if updateClass is enabled. if (options.updateClass) { options.triggerElement.removeClass(removeClass).addClass(addClass); } // Bind to the click event. options.triggerElement.bind('click', { options: options, trigger: options.triggerElement, cookie: cookieName, text: textElement, target: this }, function(event) { return collapsible.onClick(event); } ); } } ); // Don't break the chain. return this; }, onClick: function(event) { // Set a few options stored in the event data. var options = event.data.options; var trigger = event.data.trigger; var cookie = event.data.cookie; var text = event.data.text; var target = event.data.target; // Whether or not the target element is hidden. var hidden = $(target).is(":hidden"); // Set the cookie value based on visibility. var cookieValue = (hidden ? "expanded" : "collapsed"); // Set the text based on visibility. var updateText = (hidden ? options.collapseText : options.expandText); // Set the added class based on visibility. var addClass = (hidden ? options.collapseClass : options.expandClass); // Set the removed class based on visibility. var removeClass = (hidden ? options.expandClass : options.collapseClass); // Set the animation based on visibility. var animation = (hidden ? options.expandAnimation : options.collapseAnimation); // Set the duration based on visibility. var duration = (hidden ? options.expandDuration : options.collapseDuration); // Set the easing based on visibility. var easing = (hidden ? options.expandEasing : options.collapseEasing); // Set the before animate callback based on visibility. var before = (hidden ? options.beforeExpand : options.beforeCollapse); // Set the after animate callback based on visibility. var after = (hidden ? options.afterExpand : options.afterCollapse); // If tracking the collapsed state is enabled and a cookie name is set. if (cookie) { // Store the new cookie value based on visibility. $.cookie(cookie, cookieValue); } // If a before animate callback is given. if ($.isFunction(before)) { // Execute the before animate callback. before.apply(this); } // Animate the target element. $(target).animate(animation, duration, easing, after); // Assign the new text if updateText is enabled. if (options.updateText) { text.text(updateText); } // Assign the new class if updateClass is enabled. if (options.updateClass) { trigger.removeClass(removeClass).addClass(addClass); } return false; } }; } )(jQuery);