2 * "buttons" plugin - for making button-like links
5 ( function( $, undefined ) {
7 $.fn.buttonMarkup = function( options ) {
8 options = options || {};
10 for ( var i = 0; i < this.length; i++ ) {
11 var el = this.eq( i ),
13 o = $.extend( {}, $.fn.buttonMarkup.defaults, {
14 icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ),
15 iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ),
16 theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ),
17 inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
18 shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
19 corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
20 iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" )
24 innerClass = "ui-btn-inner",
25 textClass = "ui-btn-text",
26 buttonClass, iconClass,
28 // Button inner markup
29 buttonInner = document.createElement( o.wrapperEls ),
30 buttonText = document.createElement( o.wrapperEls ),
31 buttonIcon = o.icon ? document.createElement( "span" ) : null;
37 // if not, try to find closest theme container
39 o.theme = $.mobile.getInheritedTheme( el, "c" );
42 buttonClass = "ui-btn ui-btn-up-" + o.theme;
45 buttonClass += " ui-btn-inline";
49 o.icon = "ui-icon-" + o.icon;
50 o.iconpos = o.iconpos || "left";
52 iconClass = "ui-icon " + o.icon;
55 iconClass += " ui-icon-shadow";
60 buttonClass += " ui-btn-icon-" + o.iconpos;
62 if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
63 el.attr( "title", el.getEncodedText() );
68 buttonClass += " ui-btn-corner-all";
69 innerClass += " ui-btn-corner-all";
73 buttonClass += " ui-shadow";
76 e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
77 el.addClass( buttonClass );
79 buttonInner.className = innerClass;
80 buttonInner.setAttribute("aria-hidden", "true");
82 buttonText.className = textClass;
83 buttonInner.appendChild( buttonText );
86 buttonIcon.className = iconClass;
87 buttonInner.appendChild( buttonIcon );
90 while ( e.firstChild ) {
91 buttonText.appendChild( e.firstChild );
94 e.appendChild( buttonInner );
96 // TODO obviously it would be nice to pull this element out instead of
97 // retrieving it from the DOM again, but this change is much less obtrusive
99 $.data( e, 'textWrapper', $( buttonText ) );
105 $.fn.buttonMarkup.defaults = {
113 function closestEnabledButton( element ) {
117 // Note that we check for typeof className below because the element we
118 // handed could be in an SVG DOM where className on SVG elements is defined to
119 // be of a different type (SVGAnimatedString). We only operate on HTML DOM
120 // elements, so we look for plain "string".
122 cname = ( typeof element.className === 'string' ) && element.className.split(' ');
124 if ( cname && $.inArray( "ui-btn", cname ) > -1 && $.inArray( "ui-disabled", cname ) < 0 ) {
127 element = element.parentNode;
133 var attachEvents = function() {
134 $( document ).bind( {
135 "vmousedown": function( event ) {
136 var btn = closestEnabledButton( event.target ),
141 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
142 $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
145 "vmousecancel vmouseup": function( event ) {
146 var btn = closestEnabledButton( event.target ),
151 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
152 $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
155 "vmouseover focus": function( event ) {
156 var btn = closestEnabledButton( event.target ),
161 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
162 $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
165 "vmouseout blur": function( event ) {
166 var btn = closestEnabledButton( event.target ),
171 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
172 $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
180 //links in bars, or those with data-role become buttons
181 //auto self-init widgets
182 $( document ).bind( "pagecreate create", function( e ){
184 $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
185 .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )