58 lines
2.1 KiB
JavaScript

/* 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);