Created
July 23, 2011 14:24
-
-
Save dharFr/1101480 to your computer and use it in GitHub Desktop.
Simple jQuery plugin used to display contextual help
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* jQuery helpBox plugin v0.1 | |
* ========================== | |
* | |
* http://www.dhar.fr | |
* | |
* Provides a simple way to add contextual help in your page. | |
* @author Olivier Audard - audard[AT]gmail[DOT]com | |
* | |
* Usage: | |
* $('.helpdiv').helpBox({ | |
* helpContent:'<p>help content</p>', // jQuery Selector or plain text HTML. | |
* contentCls:'help-content', // CSS Class applied to the help box. | |
* buttonCls:'help-button', // CSS Class applied to the help button. | |
* buttonText:'Help' // Help Button text | |
* }); | |
*/ | |
(function($){ | |
$.fn.extend({ | |
helpBox: function(options) { | |
var defaults = { | |
helpContent:'<p>help content</p>', // jQuery Selector or plain text HTML. | |
contentCls:'help-content', // CSS Class applied to the help box. | |
buttonCls:'help-button', // CSS Class applied to the help button. | |
buttonText:'Help' // Help Button text | |
} | |
var options = $.extend(defaults, options); | |
return this.each( function() { | |
var o = options | |
// Gets help content | |
var content = ( $(o.helpContent).size() > 0 ) ? $(o.helpContent).html() : o.helpContent; | |
// Appends help box and help button | |
$(this).append("<div class='"+o.contentCls+"'>" + content + "</div>") | |
.append("<div class='"+o.buttonCls+"'><a href='javascript:void(0)'>"+o.buttonText+"</a></div>"); | |
$(this).find('.'+o.contentCls).hide(); | |
// Open the box on button mouseover, close it on click | |
$(this).find('.'+o.buttonCls+' a').mouseover( function() { | |
$(this).parent().prev('.'+o.contentCls+':hidden').slideDown(); | |
}).click( function() { | |
$(this).parent().prev('.'+o.contentCls+':visible').slideUp(); | |
}); | |
}) | |
} | |
}) | |
})(jQuery) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment