jquery mobile - Show loader on document ready -
how show loader on document ready. code above not anything.
$(document).bind("pageinit", function() { $.mobile.loading("show"); });
this might out! js fiddle help
javascript code
$(document).on('pagebeforeshow', '#index', function(){ }); $(document).on('pagebeforeshow', '#second', function(){ });
html code
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <style> .ui-loader-default { opacity: 1 !important; } .custom-spinner { width: 37px !important; height: 37px !important; background-image:url('http://pictures.reuters.com/clientfiles/rtr/images/ajax-loader.gif'); display: block; } </style> <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> <script> $( document ).bind( 'mobileinit', function(){ $.mobile.loader.prototype.options.text = "loading"; $.mobile.loader.prototype.options.textvisible = false; $.mobile.loader.prototype.options.theme = "a"; $.mobile.loader.prototype.options.html = "<div class='custom-spinner'></div>"; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script> $(document).on('pageshow', '#index', function(){ $.mobile.loading( 'show'); }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> first page </h3> <a href="#second" class="ui-btn-right">next</a> </div> <div data-role="content"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>
Comments
Post a Comment