JQuery Mobile Code Snippets 1
- by Yousef_Jadallah
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 :
Normal
0
false
false
false
EN-US
X-NONE
AR-SA
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:Arial;
mso-bidi-theme-font:minor-bidi;}
Normal
0
false
false
false
EN-US
X-NONE
AR-SA
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:Arial;
mso-bidi-theme-font:minor-bidi;}
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.
