My Blog

Custom Script Placement

—

by

admin
in

Since mobileinit gets triggered immediately upon execution of jQuery Mobile, you need to place your custom script before the jQuery Mobile JavaScript file.

Example:

<head>
    <script type="text/javascript" src="jquery-min.js"></script>
    <script type=”text/javascript” src="custom-scripts-here.js"></script>
    <script type="text/javascript" src="jquery.mobile-min.js"></script>
</head>

Configurable jQuery Mobile Options

The following are configurable $.mobile options you may override within your custom JavaScript.

  • activeBtnClass(string, default: “ui-btnactive”)The CSS class used to identify and style the “active” button. This CSS attribute is commonly used to style and identify the active button in a tab bar.
  • activePageClass(string, default: “ui-page-active”)The CSS class assigned to the page or dialog that is currently visible and active.  For instance, when multiple pages are loaded in the DOM the active page will have this CSS attribute applied.
  • ajaxEnabled(boolean, default: true)Dynamically load pages via Ajax when possible. Ajax loading is on by default for all pages except external URL’s, or links that are marked with a rel="external" or target="_blank" attribute. If Ajax is disabled, page links will be loaded with regular HTTP requests without CSS transitions.
  • allowCrossDomainPages(boolean, default: false)When developing with PhoneGap, it is recommended to set this configuration option to true. This allows jQuery Mobile to manage the page loading logic of cross-domain requests in PhoneGap.
  • autoInitializePage(boolean, default: true)For advanced developers that want total control of the initialization sequence of a page, you may set this config option to false, which disables auto-initialization of all page components. This allows developers to manually enhance each control on demand.
  • defaultDialogTransition(string, default: “pop”)The default transition to use when transitioning to a dialog. You may set the transition to “none” for no transition.
  • defaultPageTransition(string, default: “slide”)The default transition to use when transitioning to a page. You may set the transition to “none” for no transition.
  • gradeA(function that returns a boolean, default: browser must support media queries or support IE 7+);jQuery Mobile will call this method to determine if the framework will apply dynamic CSS page enhancements. By default, the method will apply enhancements for all browsers that support media queries; however, jQuery Mobile will only enhance pages for grade-A browsers. IE 7 and above are included as grade-A browsers and their displays will be enhanced too For instance, this is the current function for $.mobile.gradeA:$.mobile.gradeA: function(){
      return $.support.mediaquery ||
             $.mobile.browser.ie && $.mobile.browser.ie >= 7;
    }
  • hashListeningEnabled(boolean, default: true)Automatically load and show pages based on location.hash. jQuery Mobile listens for location.hash changes to load internal pages within the DOM. You can disable this and handle the hash changes manually or disable this option to access an anchor’s bookmark as a deep link.
  • loadingMessage(string, default: “loading”)Sets the loading message to appear during Ajax-based requests. Additionally, you can assign a false (boolean) to disable the message. Also, if you want to update the loading message at runtime on a per-page basis you can update it within your page.Example:// Update loading message
    $.mobile.loadingMessage = "My custom message!";

    // Show loading message
    $.mobile.showPageLoadingMsg();
  • minScrollBack(string, default: 250)Sets the minimum scroll distance that will be remembered when returning to a page. When returning to a page, the framework will automatically scroll to the position or link that launched the transition when the scroll position of that link is beyond the minScrollBack setting. By default, the scroll threshold is 250 pixels. If you want to eliminate the minimum setting so the framework always scrolls regardless of the scroll position, set this value to "0". If you want to disable this feature, set the value to "infinity".
  • nonHistorySelectors(string, default: “dialog”)You can specify which page components to exclude from the browser’s history stack. By default, any link with data-rel="dialog" or any page with data-role="dialog" will not appear in history. Furthermore, these non-history selector components will not have their URL updated when navigating to their page and as a result they will not be bookmarkable.
  • ns(string, default: “”)The namespace for custom data-* attributes within jQuery Mobile. Data attributes are a new feature within HTML5. For instance, “data-role” is the default namespace for the role attribute. If you wanted to override the default namespace globally you would override the $.mobile.ns option.Example:// Set a custom namespace
    $.mobile.ns = "jqm-";    As a result, all of your jQuery Mobile data-* attributes will require the prefix “data-jqm-“. For instance, the “data-role” attribute now becomes “data-jqm-role“.IMPORTANT: If you update the default namespace you will need to update one CSS selector found within the jQuery Mobile CSS file:// Original CSS for default namespace:
    .ui-mobile [data-role=page],
    .ui-mobile [data-role=dialog],
    .ui-page {..}

    // Updated CSS for the new namespace "jqm-":
    .ui-mobile [data-jqm-role=page],
    .ui-mobile [data-jqm-role=dialog],
    .ui-page {..}    Why override the default namespace?First off, if you are designing a JavaScript framework that includes HTML5 data-* attributes, the W3C recommends that you include a hook to allow the developers to customize namespaces to avoid collisions with third party frameworks. And anytime you encounter a namespace collision with another third-party framework you will need to change your default namespace.
  • page.prototype.options.addBackBtn(boolean, default: false)”If you want the back button to appear across your application, set this option to true. The back button within jQuery Mobile is a smart widget.  It will only appear when there is a page in the history stack to go back to.Example:$.mobile.page.prototype.options.addBackBtn = true;
  • page.prototype.options.keepNative(string, default::jqmData(role=’none’),:jqmData(role=’nojs’)”If you want to prevent auto-initialization without adding data-role="none" to your markup, you can customize the keepNative selector that is used for preventing auto-initialization. For instance, to prevent the framework from initializing all select and input elements we can update this selector.Example:$.mobile.page.prototype.options.keepNative = "select, input";
  • pageLoadErrorMessage(string, default: “Error Loading Page”)The error response message that appears when an Ajax page request fails to load.
  • subPageUrlKey(string, default: “ui-page”)The URL parameter used for referencing widget-generated sub-pages. An example of a sub-page URL would appear as “nested-list.html&ui-page=Movies-3”. A nested list view is a particular widget which segments each list into individual sub-pages. For example, the URL shown previously has a “Movies” sub-list that jQuery Mobile transformed into its own subpage to accommodate a deep link reference. If you need to rename this URL parameter, you can change it with $.mobile.subPageUrlKey.
  • touchOverflowEnabled(boolean, default: false)In order to achieve true fixed toolbars with native momentum scrolling, a browser needs to either support position:fixed or overflow:auto. Fortunately, new releases of WebKit (iOS5) are beginning to support this behavior. It is very likely that this option will become enabled by default. Until this occurs, we can enable this behavior by setting this configuration option to true.

CopycopyHighlighthighlightAdd NotenoteGet Linklink

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *