dynamicbible/js/jquery.slidePanel.js

/* jQuery slidePanel plugin
 * Examples and documentation at: http://www.jqeasy.com/
 * Version: 1.0 (22/03/2010)
 * No license. Use it however you want. Just keep this notice included.
 * Requires: jQuery v1.3+
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */
(function($){
    $.fn.slidePanel = function(opts) {
        opts = $.extend({
            triggerName: '#trigger',
            triggerCss: '',
            panelCss:'',
            speed: 'fast',
            clickOutsideToClose: true
        }, opts || {});
		
        
        var trigger = this;
        var panel = $(this).parent().find(".panel");

        // set css properties for trigger and panel
        trigger.attr('style',opts.triggerCss);
        panel.attr('style',opts.panelCss);
        panel.css('filter', 'alpha(opacity='+(opts.panelOpacity*100)+')');
        panel.css('opacity', opts.panelOpacity);
	
        // triggerName mousedown event
        trigger.attr( "href", "javascript:void(0)" ).mousedown(function(e) {

            panel.toggle(opts.speed);
            trigger.toggleClass("active");
            
            return false;
        });
	
        if (opts.clickOutsideToClose) {
            // bind the 'mousedown' event to the document so we can close panel without having to click triggerName
            $(document).bind('mousedown',function(){
                panel.hide(opts.speed);
                trigger.removeClass('active');
            });
			
            // don't close panel when clicking inside it
            panel.bind('mousedown',function(e){
                e.stopPropagation();
            });
        };
    };
})(jQuery);