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 { margin0text-alignleftz-index2; }


You can change text-align here. The default is left.


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>


Hide /Show button:

Put the button inside divider:

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


And then hide the divider:



Disable / Enable button

Put the button inside divider:
<div id="divbtnNext">
   <input type="button" id="btnId" value="My button" />
To disable: 
$('div#divbtnNext input[type=button]').button('disable');
To Enable:
$('div#divbtnNext input[type=button]').button('enable');


Close dialogs programmatically:



Change Background color:

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



.ui-page { 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:


       $(document).bind("mobileinit"function () {
           $.mobile.changePage.defaults.showLoadMsg = false;                


No Comments