2010-09-10 22:23:13 +00:00
|
|
|
/*
|
2010-11-10 00:55:52 +00:00
|
|
|
* jQuery Mobile Framework : plugin for making button-like links
|
2010-09-10 22:23:13 +00:00
|
|
|
* Copyright (c) jQuery Project
|
2010-11-20 03:47:47 +00:00
|
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
|
|
|
* http://jquery.org/license
|
2011-01-30 08:19:15 +00:00
|
|
|
*/
|
2011-05-26 19:08:10 +00:00
|
|
|
( function( $, undefined ) {
|
2010-09-29 18:56:41 +00:00
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
$.fn.buttonMarkup = function( options ) {
|
2010-09-29 18:56:41 +00:00
|
|
|
return this.each( function() {
|
2010-11-11 15:49:15 +00:00
|
|
|
var el = $( this ),
|
2011-09-15 23:10:10 +00:00
|
|
|
o = $.extend( {}, $.fn.buttonMarkup.defaults, {
|
|
|
|
|
icon: el.jqmData( "icon" ),
|
|
|
|
|
iconpos: el.jqmData( "iconpos" ),
|
2011-09-23 19:28:24 +00:00
|
|
|
theme: el.jqmData( "theme" ),
|
|
|
|
|
inline: el.jqmData( "inline" )
|
2011-09-15 23:10:10 +00:00
|
|
|
}, options ),
|
2010-10-22 15:39:26 +00:00
|
|
|
|
2010-09-29 18:56:41 +00:00
|
|
|
// Classes Defined
|
|
|
|
|
innerClass = "ui-btn-inner",
|
2011-06-28 22:30:17 +00:00
|
|
|
buttonClass, iconClass,
|
|
|
|
|
themedParent, wrap;
|
2010-10-21 21:18:59 +00:00
|
|
|
|
|
|
|
|
if ( attachEvents ) {
|
|
|
|
|
attachEvents();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// if not, try to find closest theme container
|
|
|
|
|
if ( !o.theme ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
themedParent = el.closest( "[class*='ui-bar-'],[class*='ui-body-']" );
|
2010-10-22 15:39:26 +00:00
|
|
|
o.theme = themedParent.length ?
|
2011-05-26 19:08:10 +00:00
|
|
|
/ui-(bar|body)-([a-z])/.exec( themedParent.attr( "class" ) )[2] :
|
2010-10-21 21:18:59 +00:00
|
|
|
"c";
|
|
|
|
|
}
|
2010-10-22 15:39:26 +00:00
|
|
|
|
|
|
|
|
buttonClass = "ui-btn ui-btn-up-" + o.theme;
|
2011-01-30 08:19:15 +00:00
|
|
|
|
2010-10-21 21:18:59 +00:00
|
|
|
if ( o.inline ) {
|
2010-10-11 19:47:30 +00:00
|
|
|
buttonClass += " ui-btn-inline";
|
|
|
|
|
}
|
2011-01-30 08:19:15 +00:00
|
|
|
|
2010-10-21 21:18:59 +00:00
|
|
|
if ( o.icon ) {
|
|
|
|
|
o.icon = "ui-icon-" + o.icon;
|
|
|
|
|
o.iconpos = o.iconpos || "left";
|
2010-09-29 18:56:41 +00:00
|
|
|
|
|
|
|
|
iconClass = "ui-icon " + o.icon;
|
|
|
|
|
|
2011-07-06 20:22:53 +00:00
|
|
|
if ( o.iconshadow ) {
|
2011-01-30 08:19:15 +00:00
|
|
|
iconClass += " ui-icon-shadow";
|
2010-10-21 21:18:59 +00:00
|
|
|
}
|
2010-09-29 18:56:41 +00:00
|
|
|
}
|
2010-10-22 15:39:26 +00:00
|
|
|
|
2010-10-21 21:18:59 +00:00
|
|
|
if ( o.iconpos ) {
|
2010-10-05 14:58:58 +00:00
|
|
|
buttonClass += " ui-btn-icon-" + o.iconpos;
|
2011-01-30 08:19:15 +00:00
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
|
2011-10-04 22:48:05 +00:00
|
|
|
el.attr( "title", el.getEncodedText() );
|
2010-10-07 15:39:23 +00:00
|
|
|
}
|
2010-10-04 16:48:32 +00:00
|
|
|
}
|
2011-01-30 08:19:15 +00:00
|
|
|
|
|
|
|
|
if ( o.corners ) {
|
2010-09-29 18:56:41 +00:00
|
|
|
buttonClass += " ui-btn-corner-all";
|
|
|
|
|
innerClass += " ui-btn-corner-all";
|
|
|
|
|
}
|
2011-01-30 08:19:15 +00:00
|
|
|
|
2010-10-21 21:18:59 +00:00
|
|
|
if ( o.shadow ) {
|
2010-09-29 18:56:41 +00:00
|
|
|
buttonClass += " ui-shadow";
|
2010-09-10 22:23:13 +00:00
|
|
|
}
|
2011-01-30 08:19:15 +00:00
|
|
|
|
2011-06-28 22:30:17 +00:00
|
|
|
el.attr( "data-" + $.mobile.ns + "theme", o.theme )
|
2010-10-21 21:18:59 +00:00
|
|
|
.addClass( buttonClass );
|
2010-10-22 15:39:26 +00:00
|
|
|
|
2011-10-04 20:45:00 +00:00
|
|
|
wrap = ( "<D class='" + innerClass + "' aria-hidden='true'><D class='ui-btn-text'></D>" +
|
2010-10-21 21:18:59 +00:00
|
|
|
( o.icon ? "<span class='" + iconClass + "'></span>" : "" ) +
|
2011-05-26 19:08:10 +00:00
|
|
|
"</D>" ).replace( /D/g, o.wrapperEls );
|
2010-10-22 15:39:26 +00:00
|
|
|
|
2010-10-21 21:18:59 +00:00
|
|
|
el.wrapInner( wrap );
|
2011-01-30 08:19:15 +00:00
|
|
|
});
|
2010-09-29 18:56:41 +00:00
|
|
|
};
|
2010-09-10 22:23:13 +00:00
|
|
|
|
2010-11-11 15:49:15 +00:00
|
|
|
$.fn.buttonMarkup.defaults = {
|
2010-09-29 18:56:41 +00:00
|
|
|
corners: true,
|
|
|
|
|
shadow: true,
|
|
|
|
|
iconshadow: true,
|
2011-09-23 19:28:24 +00:00
|
|
|
inline: false,
|
2010-10-21 21:18:59 +00:00
|
|
|
wrapperEls: "span"
|
2010-09-10 22:23:13 +00:00
|
|
|
};
|
2010-09-29 18:56:41 +00:00
|
|
|
|
2011-06-22 16:31:49 +00:00
|
|
|
function closestEnabledButton( element ) {
|
2011-05-26 19:08:10 +00:00
|
|
|
while ( element ) {
|
|
|
|
|
var $ele = $( element );
|
|
|
|
|
if ( $ele.hasClass( "ui-btn" ) && !$ele.hasClass( "ui-disabled" ) ) {
|
2011-04-18 23:13:50 +00:00
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
element = element.parentNode;
|
|
|
|
|
}
|
|
|
|
|
return element;
|
|
|
|
|
}
|
|
|
|
|
|
2010-10-21 21:18:59 +00:00
|
|
|
var attachEvents = function() {
|
2011-05-26 19:08:10 +00:00
|
|
|
$( document ).bind( {
|
|
|
|
|
"vmousedown": function( event ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
var btn = closestEnabledButton( event.target ),
|
|
|
|
|
$btn, theme;
|
|
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
if ( btn ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
$btn = $( btn );
|
|
|
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
2011-04-18 23:13:50 +00:00
|
|
|
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
|
|
|
|
|
}
|
2010-10-21 21:18:59 +00:00
|
|
|
},
|
2011-05-26 19:08:10 +00:00
|
|
|
"vmousecancel vmouseup": function( event ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
var btn = closestEnabledButton( event.target ),
|
|
|
|
|
$btn, theme;
|
|
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
if ( btn ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
$btn = $( btn );
|
|
|
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
2011-04-18 23:13:50 +00:00
|
|
|
$btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
|
|
|
|
|
}
|
2010-10-21 21:18:59 +00:00
|
|
|
},
|
2011-05-26 19:08:10 +00:00
|
|
|
"vmouseover focus": function( event ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
var btn = closestEnabledButton( event.target ),
|
|
|
|
|
$btn, theme;
|
|
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
if ( btn ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
$btn = $( btn );
|
|
|
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
2011-04-18 23:13:50 +00:00
|
|
|
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
|
|
|
|
|
}
|
2010-10-21 21:18:59 +00:00
|
|
|
},
|
2011-05-26 19:08:10 +00:00
|
|
|
"vmouseout blur": function( event ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
var btn = closestEnabledButton( event.target ),
|
|
|
|
|
$btn, theme;
|
|
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
if ( btn ) {
|
2011-06-28 22:30:17 +00:00
|
|
|
$btn = $( btn );
|
|
|
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
2011-04-18 23:13:50 +00:00
|
|
|
$btn.removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme );
|
|
|
|
|
}
|
2010-10-21 21:18:59 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
attachEvents = null;
|
2010-10-22 15:39:26 +00:00
|
|
|
};
|
2010-09-10 22:23:13 +00:00
|
|
|
|
This commit decouples all widgets from the page plugin so that they can be used ad-hoc.
- Internally, each plugin self-initializes by binding to the pagecreate event.
- Unit tests have been added and adjusted to support some internal changes involved in this commit.
- In the process, the portions of the page plugin that were used to enhance the header,content,and footer sections of a native-app style page layout are now located in jquery.mobile.page.sections.js.
- No public API options have changed, except that the page plugin no longer has options for keepNative, and degradeInputs, as plugins now handle these internally (keepNative was never documented, and degradeInputs only affected slider, so it lives there now. Page options related to the page sections are now located in the page.sections script, but they are still configurable via the page plugin's options api.
- Make, Ant, and index files are updated with a new load order for all JS files.
2011-07-19 23:05:35 +00:00
|
|
|
//links in bars, or those with data-role become buttons
|
|
|
|
|
//auto self-init widgets
|
2011-07-22 13:05:55 +00:00
|
|
|
$( document ).bind( "pagecreate create", function( e ){
|
This commit decouples all widgets from the page plugin so that they can be used ad-hoc.
- Internally, each plugin self-initializes by binding to the pagecreate event.
- Unit tests have been added and adjusted to support some internal changes involved in this commit.
- In the process, the portions of the page plugin that were used to enhance the header,content,and footer sections of a native-app style page layout are now located in jquery.mobile.page.sections.js.
- No public API options have changed, except that the page plugin no longer has options for keepNative, and degradeInputs, as plugins now handle these internally (keepNative was never documented, and degradeInputs only affected slider, so it lives there now. Page options related to the page sections are now located in the page.sections script, but they are still configurable via the page plugin's options api.
- Make, Ant, and index files are updated with a new load order for all JS files.
2011-07-19 23:05:35 +00:00
|
|
|
|
2011-07-28 18:41:31 +00:00
|
|
|
$( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
|
This commit decouples all widgets from the page plugin so that they can be used ad-hoc.
- Internally, each plugin self-initializes by binding to the pagecreate event.
- Unit tests have been added and adjusted to support some internal changes involved in this commit.
- In the process, the portions of the page plugin that were used to enhance the header,content,and footer sections of a native-app style page layout are now located in jquery.mobile.page.sections.js.
- No public API options have changed, except that the page plugin no longer has options for keepNative, and degradeInputs, as plugins now handle these internally (keepNative was never documented, and degradeInputs only affected slider, so it lives there now. Page options related to the page sections are now located in the page.sections script, but they are still configurable via the page plugin's options api.
- Make, Ant, and index files are updated with a new load order for all JS files.
2011-07-19 23:05:35 +00:00
|
|
|
.not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
|
|
|
|
|
.buttonMarkup();
|
|
|
|
|
});
|
|
|
|
|
|
2011-05-26 19:08:10 +00:00
|
|
|
})( jQuery );
|