JQuery Mobile Code Snippets 1

 I want to share with you some important codes that you may need during JQuery Mobile development.These codes has been tested on Alpha 4 version.

Beta 1 has been released before two days, Therefore I will test them in my current project and inform you of any changes : 

 Also check JQuery Mobile Code Snippets 2.
 
Show and hide back button in your Application

 

 $(document).bind("mobileinit", function () {
           $.mobile.page.prototype.options.addBackBtn = true;
       });
 
 

 

Customizing the back button text

$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.backBtnText = "previous";
});

 

 

 

Hide "Close button" for dialog programatically:

  $('[data-role=dialog]div[id="YourDiaogdivID"]').live('pagecreate', function (event) {
     $("a[data-icon='delete']").hide();
 
        });
 

Change Select option element index:

     var myselect = $("select#foo");
       myselect[0].selectedIndex = 0; //The new index
       myselect.selectmenu("refresh"); //uset this line of code after any updating on the select element 
 
 

 

Change Select optoin elemetn text value: 

   $("select#foo").parent().contents().children('.ui-btn-text').text('Your Text Here');
 

 

Refreshing a checkbox

   $("select#foo").parent().contents().children('.ui-btn-text').text('Your Text Here');
 
 

 

Hide select option element 

 $('#foo').parent().hide();

 

 

Hide and Show Page Loading Message :

Before Beta 2: 
$.mobile.pageLoading(); //Show
$.mobile.pageLoading(true); //hide
 
Beta 2+ : 
$.mobile.showPageLoadingMsg();         
$.mobile.hidePageLoadingMsg();       

 

 

overriding $.mobile.loadingMessage

 
$(document).bind("mobileinit", function () {
    $.mobile.loadingMessage = 'My Loading Message';
   
});
 

 

Hide and Show jQuery-Mobile-Themed-DatePicker 

  $(".ui-datepicker").hide();
  $(".ui-datepicker").show();

 

 

 

Build your Custom Loading Message :

          $('#CustomeLoadingMessage').hide();//Hide the div 
 
 
            $('# CustomeLoadingMessage').ajaxStart(function () {
                $(this).show();
            });
 
            $('# CustomeLoadingMessage').ajaxStop(function () {
                $(this).hide();
            });

 

I will publish other important codes soon.

Hope that helps.

11 Comments

  • Thanks very much for sharing

  • Good info, thanks for sharing.

    I'm still trying to get my arms around jquerymobile development and the best way to approach with .Net. Do you know if there are resources on this? Specifically, is it recommended to use asp.net server controls with jquerymobile (having problems with asp:dropdownlist). If not, better to use HTML controls and maybe Razor? Any input appreciated.

  • I tried a lot button did not go

  • any idea how to change the header theme that shows up behind the back button? by default it is set to data-theme="b"
    Thanks in advance
    Vish

  • Dear zgates,
    We dont need to use server side controls, I believe that the best way is use HTML controls and AJAX JQuery with WebService to connect with the database and server resources,I used this way in my projects and I found it such a good approach.

     

  • Dear mahesh,
    Could you please give me an example.

  • Dear Vish,

    This is the default theme, you can change it to a,c,d or e. Kindly refer to this link jquerymobile.com/.../1.0b1.

    On the other hand, you can customize your theme by modify JQuery Mobile css file.

    Every theme in the css file are separated, therefore you can change anyone of them. As an instance you can fine the header of the theme "/* A" and change all the content of the classes which belong to that theme.
    Another way is to override your class name in separete css file then you need to link the new css file after the original one.


    Hope that helps,

  • Was helpful, thankz.

  • Wow, awesome blog format! How lengthy have you ever been running a blog for?
    you make blogging look easy. The overall glance
    of your site is great, let alone the content!

  • Pretty! This was a really wonderful post. Many thanks for
    supplying this information.

  • I could not refrain from commenting. Exceptionally well written!

Comments have been disabled for this content.