JQuery Mobile Code Snippets 1

Posted by Yousef_Jadallah on ASP.net Weblogs See other posts from ASP.net Weblogs or by Yousef_Jadallah
Published on Wed, 22 Jun 2011 13:15:00 GMT Indexed on 2011/06/22 16:22 UTC
Read the original article Hit count: 377

Filed under:
|
|

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

Beta 1 has been released before two days, Therefore I will test them in my current project and let you know if there is any changes :

 
 
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 :

 $.mobile.pageLoading(); //Show
 $.mobile.pageLoading(true); //hide
        

 

 

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 wil publish other important codes soon.

Hope that helps.

© ASP.net Weblogs or respective owner

Related posts about JQuery Mobile

Related posts about mobile