lo-ga-rie words, lines .. life

FancyButton

jquery plugin page

FancyButton is a jQuery plugin to create buttons from a<a> or <input>
FancyButton will wrap the element with a span, prepend it with a span and append it with a span. This way the element remains an inline element and the prepended and appended span can be used to add simple rounded corners / png's while the button will still work normally in IE6. javascript clicks will be put on the container span so the code will be only triggered once, this is very helpful when you work with .net postbacks for example. When the element has a width attribute in the CSS this width will be parsed to the element's code; this will fix the "firebug cannot set the width" bug. Only elements with a class fancybutton will be processed.

A simple example:

 
 This will link to google because we can!

Will show: This will link to google because we can!

Javascript used: [jquery.fancybutton.js] *remove the trailing spans when copyinng

/*
	@author: Lucien Immink
	@version: 0.6 initial public release
        @changelog: 0.6: added hover
*/

jQuery.fn.fancyButton = function(settings) {
	// settings
	settings = jQuery.extend({
		className: 'fancybutton',
                hoverClass: 'hover'
	}, settings);

	jQuery(this).find("."+settings["className"]).each(function() {
		// preappend the object with a span, append it with a span
		try {
			var classes = jQuery(this).removeClass(settings["className"]).attr("class");
			if (classes == undefined) {
				classes = "";
			}
			jQuery(this).addClass(settings["className"]);
			jQuery("< \/span>").insertBefore(jQuery(this));
			jQuery(this).prev().append(" < \/span>");
			jQuery(this).prev().append(jQuery(this));
			// width fix for firefox
			jQuery(this).css("width", jQuery(this).css("width"));
			jQuery(this).parent().append(" < \/span>");

			if (jQuery(this).parent().find("a").attr("href").indexOf("javascript:") == -1) {
			    jQuery(this).parent().click(function() {
				    document.location.href = jQuery(this).parent().find("a").attr("href");
			    });
			}
                        jQuery(this).parent().bind("mouseenter mouseleave", function () {
                                     jQuery(this).toggleClass(settings["hoverClass"]);
                        });
		} catch (e) {
			if (window.console) console.error(e);
		}
	});
	// return the element
	return jQuery(this);
};

[in page]

$(document).ready(function() {
 $(document).fancyButton();
});

css used:

/* fancyButton */
span.button {
    display: inline-block;
    overflow: hidden;
}
span.button.green .buttonleft {
    background: url(/projects/fancybutton/_left_green.png) no-repeat 0 0;
    width: 7px;
    display:block;
    float:left;
    height: 24px;
    text-decoration: none;
}
span.button.green .txtbutton {
    background: url(/projects/fancybutton/_middle_green.png) repeat-x 0 0;
    padding: 2px 5px;
    color: #fff;
    font-weight: bold;
    width: auto;
    float:left;
    height: 21px;
    text-align: center;
    text-decoration: none;
}
span.button.green .buttonright {
    background: url(/projects/fancybutton/_right_green.png) no-repeat 0 0;
    width: 7px;
    display:block;
    float:left;
    height: 24px;
    text-decoration: none;
}