To give your user interface an individual style, you might want to change the color to something more specific such as green, black or a specific rgb color.
Using CSS to change the font color of your button or link containing the icon will not work, as the jQuery Mobile svg icons are realized as background images.

The solution to change the icons color, is to modify the svg image realizing the icon itself.
To do so, open jquery mobiles stylesheet (e.g. “jquery.mobile.inline-svg-1.4.1.min.css”) and find the definition of the icon you would like to change (e.g. .ui-icon-delete:after)
The styles are always defined as “.ui-icon-:after”. The icon style definitions contain background images with the SVG images encoded in a data url.

To change the color, you do not need to understand the full encoded svg data url. You just need to know that shapes in an SVG are defined by polygones. In the example below, search for the string “polygon%20fill%3D%22%23FFF”:

.ui-icon-delete:after{
background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

“polygon%20fill%3D%22%23FFF“ stands for a polygon filled with the color white (FFF).

So to define your custom icon with a different color, copy the style definition into your own css stylesheet file and replace “FFF” with your prefered hex color definition.
Note: You should not modify the original jquery mobile file. Otherwise your modifications could be overridden with the next update.

  <a id="mybutton"  data-role="button">MyButton</a>

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
        });

However, this will keep your button in an active state which does feel very responsive.

Simply returning true at the end of your handler function or trying to trigger the event again will not work. JQuery internally removes all flags of the event.

The solution to bring your button back into it’s not active status at the end of your handler, you need to manually remove jquery mobiles active button class.
This is supported by a global variable $.mobile.activeBtnClass.

So just change your handler code above and add the assignment of this class at the end:

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
            this.$('a').removeClass($.mobile.activeBtnClass);
        });

Today I hit pixeden and I am really impressed. They offer commercial and free PSD templates in a very good quality. So whenever you need to build a mock up, take a look around. At least for mac devices you should find something useful:

Mock-Up Templates:
http://www.pixeden.com/psd-mock-up-templates

If you look specific for free templates, Pixeden offers a specific category for that (not mock ups only):
http://www.pixeden.com/free-graphics

A good jQuery plugin to do this is jquery.mobile.fastButtons.js available at
http://www.jqueryscript.net/mobile/jQuery-Plugin-For-Removing-The-300ms-Delay-On-Mobile-Device-fastButtons.html

The plugin is easy to install and uses an approach to replace the click events with vclick events which are faster applied. The plugin is also very lightweight. So just a small overhead in loading and only replaces the default click handler.

To enable the plugin, simply download the file, place it in your application and include the script file after the jQuery and jQuery Mobile libraries. For example:

  <script src="js/lib/jquery-1.10.2.min.js"></script>
  <script src="js/lib/mobile/jquery.mobile-1.4.0.min.js"></script>
  <script src="js/lib/jquery.mobile.fastButtons.js"></script>

Other approaches, such as the fastbutton plugin add a layer div or span on top of your application and try to estimate the element visually present under this layer. This is done by pixel calculations with a small deviation. It works fine for static elements not located close to other elements. But for example, if your header contains an icon close to the screens border to open a sliding panel, the click behaviour can be completely messed up du to this deviation.

To programmatically control he loading dialog, jQuery provides a Javascript API. For example, you can show the dialog by calling

$.mobile.loading('show');

or hide the dialog via

$.mobile.loading('hide');

However, what is missing in the documention, this control is not available at anytime during your program execution. As described in this stack overflow thread, the loader can only controlled directly during the showpage event processing.

To solve this issue and control the loader widget at anytime, you must execute it asynchronously. This can be achieved by putting it into a setTimeout() callback.

function showLoader() {
    window.setTimeout(function(){
        $.mobile.loading('show');
    }, 1);
};

function hideLoader() {
    window.setTimeout(function(){
        $.mobile.loading('hide');
    }, 1);
};

Note: Some people, as in the stack overflow discussion mentioned above, use a solution based Javascript’s setInterval() method. It did not work reliably in my experience, and the intend of setInterval() is to execute something periodically. In our case, we want to control the loader widget only once. So setTimout() better fits to out intention.

The automatic truncation and replacements with ellipsis (…, three points in a row) works fine for the majority of elements. However, sometimes, especially for very short labels (e.g. “GO”), you will ensure the label to be presented.

This can be achieved with CSS. It is recommended to specify the CSS below explicitly for particular elements to prevent the jQM’s responsiveness for the rest of the user interface.

CSS:

.searchform .ui-input-btn { 
  white-space: nowrap !important; 
  overflow: visible !important; 
}

HTML:

<div class="searchform">
  <input type="submit" value="GO">
</div>

The jQuery Mobile Icon Pack provided by Andy Matthews is a widely used icon pack replacing the default jQuery Mobile icons with enhanced Font Awesome icons. These icons allow for higher quality then default icons (jQuery Mobile version < 1.4). However, this icon pack was created before iOS 7 has been released. Meanwhile Apple makes use of a higher resolution image processing. With this enhancement, there is also a change in processing CSS background size definitions in the context of media queries. As identified by Andy Crone on StackOverflow, it is required to explicitly reset the background images sizes. This must also be done for the jQuery Mobile Icon pack to make the icons work on iOS 7 devices.

To fix this, add the following css definitions to your CSS:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
    
    .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
    .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
    .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
    .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info2, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
    .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
    .ui-icon-question , .ui-icon-foursquare, .ui-icon-dollar , .ui-icon-euro,
    .ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-mappin , .ui-icon-direction,
    .ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
    .ui-icon-wifi , .ui-icon-phone , .ui-icon-power ,
    .ui-icon-lightning , .ui-icon-drink , .ui-icon-android {
        -moz-background-size: 774px 54px;
        -o-background-size: 774px 54px;
        -webkit-background-size: 774px 54px;
        background-size: 774px 54px;
    }
    .ui-icon:before { margin-left: 4px; }
}

Note that this media query has been specified for a pixel ration of 2 as used by iOS 7.

The color can be changed in your iOS apps main view controller. PhoneGap generates this by default to platforms/ios/Classes/MainViewController.m

In this file, search for the method

- (void)webViewDidFinishLoad:(UIWebView*)theWebView

and change the line

theWebView.backgroundColor = [UIColor blackColor];

to whatever color you perfer. For example to have a white background:

theWebView.backgroundColor = [UIColor whiteColor];


Using a fixed header means, the header will remain under the status bar, but the content will slight under the header but will be visible again under the transparent status bar.
The reason for this is, the webView container consumes the device’s complete screen including the status bar area (just in the background).

Even the november 2013th PhoneGap release (3.3) does not fix this issue. However, different approaches exist in the web. They can be categorized into web-technology only and native iOS solutions. While the former let’s you stay in your web technology world as much as possible, the later is more performant and let’s you keep your PhoneGap app a little bit more platform independent.

HTML/CSS/JavaScript Solution

Many such solutions can be found on stackoverflow and in blogs. However, the most reasonable I found and successfully used is described by cornbeast R&D. It just made some minor modifications to make it work on all iOS devices and support jQuery Mobile headers and panels:

Add the following CSS definitions:

/**
* Styles to fix the new iOS 7 transparent status bar
*/
#ios7statusbar {
width:100%;
height:20px;
background-color:white;
position:fixed;
z-index:10000;
}
.ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane {
margin-top: 20px;
}

(I put them into a platform specific PhoneGap merges css file to keep the main css definitions clear from this platform specific one. )

Add a JavaScript based user agent detection to your app initialization:

if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) {
$("body").addClass("ios7");
$("body").append('