JQuery Mobile Code Snippets 2

 This part is a complement of JQuery Mobile Code Snippets 1 , hope these codes help you.

Override Checkbox and Radio alignment:

Override CSS file:

.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; }

Navigation bar:

        <div role="navigation" class="ui-navbar ui-navbar-noicons" data-role="navbar">

                <ul class="ui-grid-b">

                    <li><a data-theme="a" href="#">Ads 1</a></li>

                    <li><a data-theme="a" href="#">Ads 2</a></li>

                    <li><a data-theme="a" href="#">Ads 3</a></li>

                </ul>

            </div>

Hide /Show button:

Put the button inside divider:

 <div id='divNextbtn'>

   <input type="button" id="btnId" value="More 50 Jokes" />

 </div>

And then hide the divider:

 $('div#divNextbtn').attr('style', 'display:none');

Disable / Enable button

Put the button inside divider:

<div id="divbtnNext">

   <input type="button" id="btnId" value="My button" />

</div>

To disable: 

$('div#divbtnNext input[type=button]').button('disable');

To Enable:

$('div#divbtnNext input[type=button]').button('enable');

Close dialogs programmatically:

$('.ui-dialog').dialog('close');

Change Background color:

Depend on the theme, for example when you are using theme "b":

.ui-body-b

{

    background: white;

}

Chagne Background Image :

    .ui-body-b {

        background-image:  url(Style/cust-images/sign-up-tw.png);

    }

Add Back button to the page:

Assign data-rel = back to the anchor :

<a data-role="button" data-rel="back" href="#">Back</a>

Ignore Load Message from the page:

   <script>

       $(document).bind("mobileinit", function () {

           $.mobile.changePage.defaults.showLoadMsg = false;                

       });

    </script>