diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index d233a05f28c..3e0eee01c9c 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -196,6 +196,23 @@ else { $window.trigger( "hashchange", [ true ] ); } + }, + + // display an auto-fade message box. + messageBox: function( message, delay ){ + // default delay is 800ms. + if ( delay === undefined ) + delay = 800; + + // no duplicate message boxes. + $( "div[data-role='message-box']" ).remove(); + var $box = $( "

" ); + $box.find( "h1" ).text( message ); + $box.css({ "display": "block", "opacity": 0.96, "top": $window.scrollTop() + 100 }) + .appendTo( $.mobile.pageContainer ) + .delay( delay ) + .fadeOut( 400, function(){ $(this).remove(); } ); + return $box; } }); diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 677270d4f13..dd7fcd54b8d 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -574,13 +574,7 @@ if(base){ base.set(path.get()); } - $("

Error Loading Page

") - .css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 }) - .appendTo( $.mobile.pageContainer ) - .delay( 800 ) - .fadeOut( 400, function(){ - $(this).remove(); - }); + $.mobile.messageBox( "Error Loading Page" ); releasePageTransitionLock(); } }); diff --git a/tests/unit/core/core.js b/tests/unit/core/core.js index 9a4f0aba5be..563e2106dd8 100644 --- a/tests/unit/core/core.js +++ b/tests/unit/core/core.js @@ -145,5 +145,21 @@ stop(); $.testHelper.reloadLib(libName); }); + + test( "messageBox appears and removes itself", function(){ + same( $( "div[data-role='message-box']" ).length, 0, "no message box to begin with" ); + $.mobile.messageBox( "Baba yetu" ); + same( $( "div[data-role='message-box']" ).length, 1, "added one message box" ); + same( $( "div[data-role='message-box'] h1").text(), "Baba yetu", "message is correct" ); + $.mobile.messageBox( "yetu uliye" ); + same( $( "div[data-role='message-box']" ).length, 1, "no duplicate message boxes" ); + same( $( "div[data-role='message-box'] h1").text(), "yetu uliye", "message is correct" ); + stop(); + + setTimeout( function(){ + same( $( "div[data-role='message-box']" ).length, 0, "message box removed after 1.5s" ); + start(); + }, 1500); + }); }); -})(jQuery); \ No newline at end of file +})(jQuery);