chapter: The Framework and JavaScript ================== $(document).bind('mobileinit', function() { // Initialization code here }); ==================================== My first jQuery Mobile code ==================================== ==================================== $(document).bind("mobileinit", function() { // We change default values $.mobile.defaultPageTransition = "fade"; $.mobile.minScrollBack = 150; $.mobile.activeBtnClass = "active-button"; }); ==================================== $(document).bind("mobileinit", function() { // We change default values $.mobile.ns = "firt"; }); ====================================
==================================== // Global strings $.mobile.loadingMessage = "loading"; $.mobile.pageLoadErrorMessage = "Error Loading Page"; // Widget strings $.mobile.page.prototype.options.backBtnText = "Back"; $.mobile.dialog.prototype.options.closeBtnText = "Close" $.mobile.collapsible.prototype.options.expandCueText = " click to expand contents"; $.mobile.collapsible.prototype.options. collapseCueText = " click to collapse contents"; $.mobile.listview.prototype.options.filterPlaceholder = "Filter items..."; $.mobile.selectmenu.prototype.options.closeText = "Close"; ==================================== $(document).bind('mobileinit', function() { // Global strings $.mobile.loadingMessage = "cargando"; $.mobile.pageLoadErrorMessage = "Error Cargando Página"; // Widget strings $.mobile.page.prototype.options.backBtnText = "Atrás"; $.mobile.dialog.prototype.options.closeBtnText = "Cerrar" $.mobile.collapsible.prototype.options.expandCueText = " click para expandir contenido"; $.mobile.collapsible.prototype.options. collapseCueText = " click para cerrar contenido"; $.mobile.listview.prototype.options.filterPlaceholder = "Filtrar ítems..."; $.mobile.selectmenu.prototype.options.closeText = "Cerrar"; }); ==================================== $(document).bind('mobileinit', function() { $.mobile.touchOverflowEnabled=true; }); ==================================== $(document).bind('mobileinit', function() { $.mobile.page.prototype.options.addBackBtn = true; $.mobile.page.prototype.options.backBtnTheme = "e"; $.mobile.page.prototype.options.headerTheme = "b"; $.mobile.page.prototype.options.footerTheme = "d"; }); ==================================== $(document).bind('mobileinit', function() { // Enables filtering on all the listviews $.mobile.listview.prototype.filter = true; // Enables non-native menus for all selects $.mobile.selectmenu.prototype.nativeMenu=false; }); ==================================== var buttons = $("a[data-role=button"]); ==================================== var buttons = $("a:jqmData(role='button')"); ==================================== $("a").jqmRemoveData("transition"); $("#button1").jqmData("theme", "a"); ==================================== var currentPageId = $.mobile.activePage.id; ==================================== $.mobile.changePage("external.html"); ==================================== $.mobile.changePage($("#pageId")); ==================================== $.mobile.changePage($("#page2"), { transition: "slide", reverse: true }); ==================================== Product details ==================================== // This code shows the loading message and hide it after 2 seconds $.mobile.showPageLoadingMsg(); setTimeout(function() { $.mobile.hidePageLoadingMsg(); }, 2000); ==================================== $.mobile.transitionHandlers.explode = explodeTransitionHandler; ==================================== $.mobile.defaultTransitionHandler = explodeTransitionHandler; ====================================

Dynamic page

Add Pages
==================================== function addPages() { for (var i=1; i<5; i++) { var page = $("
").jqmData("role", "page").attr("id", "page" + i); // header $("
").attr("data-role", "header").append($("

") .html("Page " + i)).appendTo(page); // content $("
").attr("data-role", "content").append($("

") .html("Contents for page " + i)) .appendTo(page); $("body").append(page); $("

  • ").append($("").attr("href", "#page"+i).html("Go to page " + i)) .appendTo("#list1"); } $("#button1").hide(); }; ==================================== jQuery Mobile

    Header

    Content

    Footer

    ==================================== $("a").button(); ==================================== var button = $("").attr("href", "somewhere.html").button(); ==================================== $("#list1").listview('refresh'); $("#checkbox").val('true').checkboxradio('refresh'); ====================================
    ==================================== $("#list1").listview('refresh'); ==================================== $("#element").grid(); ==================================== $("#content").html(newHTMLcontentWithWidgets); $("#page1").trigger("create"); ==================================== $("#page2").live("pageinit", function(event) { }); ==================================== $(document).bind("pageloadfailed", function(event, data) { data.preventDefault(); // Custom error management }); ==================================== $(document).bind("orientationchange", function(orientation) { if (orientation=="landscape") { // We are now in landscape } else { // We are now in portrait } }); ==================================== $(document).bind("mobileinit", function() { $("#page2").live("swiperight", goBackToPage1); }); function goBackToPage1() { $.mobile.changePage("#page1", { reverse: true }); $("#page2").unbind("swiperight", goBackToPage1); } ==================