libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.dialog.js

   1 /*
   2 * "dialog" plugin.
   3 */
   4
   5 (function( $, window, undefined ) {
   6
   7 $.widget( "mobile.dialog", $.mobile.widget, {
   8         options: {
   9                 closeBtnText    : "Close",
  10                 overlayTheme    : "a",
  11                 initSelector    : ":jqmData(role='dialog')"
  12         },
  13         _create: function() {
  14                 var self = this,
  15                         $el = this.element,
  16                         headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
  17
  18                 $el.addClass( "ui-overlay-" + this.options.overlayTheme );
  19
  20                 // Class the markup for dialog styling
  21                 // Set aria role
  22                 $el.attr( "role", "dialog" )
  23                         .addClass( "ui-dialog" )
  24                         .find( ":jqmData(role='header')" )
  25                         .addClass( "ui-corner-top ui-overlay-shadow" )
  26                                 .prepend( headerCloseButton )
  27                         .end()
  28                         .find( ":jqmData(role='content'),:jqmData(role='footer')" )
  29                                 .addClass( "ui-overlay-shadow" )
  30                                 .last()
  31                                 .addClass( "ui-corner-bottom" );
  32
  33                 // this must be an anonymous function so that select menu dialogs can replace
  34                 // the close method. This is a change from previously just defining data-rel=back
  35                 // on the button and letting nav handle it
  36                 headerCloseButton.bind( "vclick", function() {
  37                         self.close();
  38                 });
  39
  40                 /* bind events
  41                         - clicks and submits should use the closing transition that the dialog opened with
  42                           unless a data-transition is specified on the link/form
  43                         - if the click was on the close button, or the link has a data-rel="back" it'll go back in history naturally
  44                 */
  45                 $el.bind( "vclick submit", function( event ) {
  46                         var $target = $( event.target ).closest( event.type === "vclick" ? "a" : "form" ),
  47                                 active;
  48
  49                         if ( $target.length && !$target.jqmData( "transition" ) ) {
  50
  51                                 active = $.mobile.urlHistory.getActive() || {};
  52
  53                                 $target.attr( "data-" + $.mobile.ns + "transition", ( active.transition || $.mobile.defaultDialogTransition ) )
  54                                         .attr( "data-" + $.mobile.ns + "direction", "reverse" );
  55                         }
  56                 })
  57                 .bind( "pagehide", function() {
  58                         $( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
  59                 });
  60         },
  61
  62         // Close method goes back in history
  63         close: function() {
  64                 window.history.back();
  65         }
  66 });
  67
  68 //auto self-init widgets
  69 $( $.mobile.dialog.prototype.options.initSelector ).live( "pagecreate", function(){
  70         $( this ).dialog();
  71 });
  72
  73 })( jQuery, this );