jquery-mobile/js/jquery.mobile.buttonMarkup.js
2011-06-22 09:31:49 -07:00

134 lines
3.2 KiB
JavaScript

/*
* jQuery Mobile Framework : plugin for making button-like links
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
( function( $, undefined ) {
$.fn.buttonMarkup = function( options ) {
return this.each( function() {
var el = $( this ),
o = $.extend( {}, $.fn.buttonMarkup.defaults, el.jqmData(), options ),
// Classes Defined
buttonClass,
innerClass = "ui-btn-inner",
iconClass;
if ( attachEvents ) {
attachEvents();
}
// if not, try to find closest theme container
if ( !o.theme ) {
var themedParent = el.closest( "[class*='ui-bar-'],[class*='ui-body-']" );
o.theme = themedParent.length ?
/ui-(bar|body)-([a-z])/.exec( themedParent.attr( "class" ) )[2] :
"c";
}
buttonClass = "ui-btn ui-btn-up-" + o.theme;
if ( o.inline ) {
buttonClass += " ui-btn-inline";
}
if ( o.icon ) {
o.icon = "ui-icon-" + o.icon;
o.iconpos = o.iconpos || "left";
iconClass = "ui-icon " + o.icon;
if ( o.shadow ) {
iconClass += " ui-icon-shadow";
}
}
if ( o.iconpos ) {
buttonClass += " ui-btn-icon-" + o.iconpos;
if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
el.attr( "title", el.text() );
}
}
if ( o.corners ) {
buttonClass += " ui-btn-corner-all";
innerClass += " ui-btn-corner-all";
}
if ( o.shadow ) {
buttonClass += " ui-shadow";
}
el
.attr( "data-" + $.mobile.ns + "theme", o.theme )
.addClass( buttonClass );
var wrap = ( "<D class='" + innerClass + "'><D class='ui-btn-text'></D>" +
( o.icon ? "<span class='" + iconClass + "'></span>" : "" ) +
"</D>" ).replace( /D/g, o.wrapperEls );
el.wrapInner( wrap );
});
};
$.fn.buttonMarkup.defaults = {
corners: true,
shadow: true,
iconshadow: true,
wrapperEls: "span"
};
function closestEnabledButton( element ) {
while ( element ) {
var $ele = $( element );
if ( $ele.hasClass( "ui-btn" ) && !$ele.hasClass( "ui-disabled" ) ) {
break;
}
element = element.parentNode;
}
return element;
}
var attachEvents = function() {
$( document ).bind( {
"vmousedown": function( event ) {
var btn = closestEnabledButton( event.target );
if ( btn ) {
var $btn = $( btn ),
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
}
},
"vmousecancel vmouseup": function( event ) {
var btn = closestEnabledButton( event.target );
if ( btn ) {
var $btn = $( btn ),
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
$btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
}
},
"vmouseover focus": function( event ) {
var btn = closestEnabledButton( event.target );
if ( btn ) {
var $btn = $( btn ),
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
}
},
"vmouseout blur": function( event ) {
var btn = closestEnabledButton( event.target );
if ( btn ) {
var $btn = $( btn ),
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
$btn.removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme );
}
}
});
attachEvents = null;
};
})( jQuery );