| //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); |
| //>>description: Custom-styled native input/buttons |
| //>>label: Buttons: Input or button-based |
| //>>group: Forms |
| //>>css.structure: ../css/structure/jquery.mobile.button.css |
| //>>css.theme: ../css/themes/default/jquery.mobile.theme.css |
| |
| define( [ "jquery", "../../jquery.mobile.widget", "../../jquery.mobile.buttonMarkup" ], function( jQuery ) { |
| //>>excludeEnd("jqmBuildExclude"); |
| (function( $, undefined ) { |
| |
| $.widget( "mobile.button", $.mobile.widget, { |
| options: { |
| theme: null, |
| icon: null, |
| iconpos: null, |
| corners: true, |
| shadow: true, |
| iconshadow: true, |
| initSelector: "button, [type='button'], [type='submit'], [type='reset']" |
| }, |
| _create: function() { |
| var $el = this.element, |
| $button, |
| o = this.options, |
| type, |
| name, |
| inline = o.inline || $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "inline" ), |
| mini = o.mini || $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "mini" ), |
| classes = "", |
| $buttonPlaceholder; |
| |
| // if this is a link, check if it's been enhanced and, if not, use the right function |
| if ( $el[ 0 ].tagName === "A" ) { |
| if ( !$el.hasClass( "ui-btn" ) ) { |
| $el.buttonMarkup(); |
| } |
| |
| return; |
| } |
| |
| // get the inherited theme |
| // TODO centralize for all widgets |
| if ( !this.options.theme ) { |
| this.options.theme = $.mobile.getInheritedTheme( this.element, "c" ); |
| } |
| |
| // TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577 |
| /* if ( $el[0].className.length ) { |
| classes = $el[0].className; |
| } */ |
| if ( !!~$el[0].className.indexOf( "ui-btn-left" ) ) { |
| classes = "ui-btn-left"; |
| } |
| |
| if ( !!~$el[0].className.indexOf( "ui-btn-right" ) ) { |
| classes = "ui-btn-right"; |
| } |
| |
| if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) { |
| classes ? classes += " ui-submit" : classes = "ui-submit"; |
| } |
| $( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" ); |
| |
| // Add ARIA role |
| this.button = $( "<div></div>" ) |
| [ $el.html() ? "html" : "text" ]( $el.html() || $el.val() ) |
| .insertBefore( $el ) |
| .buttonMarkup({ |
| theme: o.theme, |
| icon: o.icon, |
| iconpos: o.iconpos, |
| inline: inline, |
| corners: o.corners, |
| shadow: o.shadow, |
| iconshadow: o.iconshadow, |
| mini: mini |
| }) |
| .addClass( classes ) |
| .append( $el.addClass( "ui-btn-hidden" ) ); |
| |
| $button = this.button; |
| type = $el.attr( "type" ); |
| name = $el.attr( "name" ); |
| |
| // Add hidden input during submit if input type="submit" has a name. |
| if ( type !== "button" && type !== "reset" && name ) { |
| $el.bind( "vclick", function() { |
| // Add hidden input if it doesn't already exist. |
| if ( $buttonPlaceholder === undefined ) { |
| $buttonPlaceholder = $( "<input>", { |
| type: "hidden", |
| name: $el.attr( "name" ), |
| value: $el.attr( "value" ) |
| }).insertBefore( $el ); |
| |
| // Bind to doc to remove after submit handling |
| $.mobile.$document.one( "submit", function() { |
| $buttonPlaceholder.remove(); |
| |
| // reset the local var so that the hidden input |
| // will be re-added on subsequent clicks |
| $buttonPlaceholder = undefined; |
| }); |
| } |
| }); |
| } |
| |
| $el.bind({ |
| focus: function() { |
| $button.addClass( $.mobile.focusClass ); |
| }, |
| |
| blur: function() { |
| $button.removeClass( $.mobile.focusClass ); |
| } |
| }); |
| |
| this.refresh(); |
| }, |
| |
| enable: function() { |
| this.element.attr( "disabled", false ); |
| this.button.removeClass( "ui-disabled" ).attr( "aria-disabled", false ); |
| return this._setOption( "disabled", false ); |
| }, |
| |
| disable: function() { |
| this.element.attr( "disabled", true ); |
| this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true ); |
| return this._setOption( "disabled", true ); |
| }, |
| |
| refresh: function() { |
| var $el = this.element; |
| |
| if ( $el.prop("disabled") ) { |
| this.disable(); |
| } else { |
| this.enable(); |
| } |
| |
| // Grab the button's text element from its implementation-independent data item |
| $( this.button.data( 'buttonElements' ).text )[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() ); |
| } |
| }); |
| |
| //auto self-init widgets |
| $.mobile.$document.bind( "pagecreate create", function( e ) { |
| $.mobile.button.prototype.enhanceWithin( e.target, true ); |
| }); |
| |
| })( jQuery ); |
| //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); |
| }); |
| //>>excludeEnd("jqmBuildExclude"); |