Jquery Mobile Dev Tools – Application Development Cloud

Equalize JQuery Mobile Grid Height

function resize(){

var tallest = 0;

$(‘.ui-grid-b > div’).each(function(){

temptall=$(this).attr(“height”);

if (temptall >= tallest){ tallest=temptall;}

});

; $(‘.ui-grid-b .ui-bar’).height(tallest);

}

$(“body”).on(“resize”, resize(););

This is the standard page template you should start with on a project:

 <!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"

 href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <-----this will need to be updated to the latest cdn link

<script type="text/javascript"

src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <-----this will need to be updated to the latest cdn link

<script type="text/javascript"

src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <-----this will need to be updated to the latest cdn link

</head>

<body>

<div data-role="page">

<div data-role="header">

<h1>Page Title</h1>

</div>

<!-- /header -->

<div data-role="content">

<p>Page content goes here.</p>

</div>

<!-- /content -->

<div data-role="footer">

<h4>Page Footer</h4>

</div>

<!-- /footer -->

</div>

 <!-- /page -->

</body>

</html>

There are some techniques for making the “Loading” animation work when you want it.

During your jquery script calls, you used to initiate the loading anim using:

$.mobile.showPageLoadingMsg(“b”, “Attempting login…”);

The docs say that the mobile pageloading is depreciated and to use this:

$.mobile.loading( 'show') ;

Here is how to customize the call to change the theme, what text is displayed, and whether or not the spinning loader graphic is displayed.

$.mobile.loading( 'show', { theme: "b", text: "foo", textonly: true });

Object Param Arguments: theme (string, default: “a”) The theme swatch for the message.; text (string, default: “loading”) The text of the message.; textonly (boolean, default: false) If true, the “spinner” image will be hidden when the message is shown.; textVisible (boolean, default: false) If true, the text value will be used under the spinner.; html (string, default: “”) If this is set to a non empty string value, it will be used to replace the entirety of the loader’s inner html.; Here is my final version of the loader used in my progress reporting application. I created a custom animation using the school’s logo and scripted the loading animation whenever user interaction required a notice that things were going on behind the scenes.; $.mobile.loading( ‘show’, {
text: ‘Accessing Data…’,
textVisible: true,
theme: ‘b’,
html: “<center>Attempting Login…<br/><img src=’themes/images/svcloader_sm.gif’></center>”
});
I love using the “depreciated” center tag because it works so well on EVERY device and browser that exists. This is one of those rare times when CSS isn’t the answer, since I don’t’ want to make a special style sheet that would need to be included in every situation that I call this from.; When my scripts are done with the user interaction, I close the loading animation as such:; $.mobile.loading( ‘hide’ );

I swear this is new, but maybe I just didn’t notice it yet. This is the bomb.

http://jquerymobile.com/test/docs/pages/popup/index.html