jQueryMobile Vital Few Notes

Vital Few

  • When creating a web application that has all of the pages built-in internal, you cannot use named anchors in them because jQuery Mobile uses named anchors to navigate within the pages. To get around this you will have to use JavaScript (e.g., to scroll elements into view).
  • External pages uses the regular link tag (<a>). However, jQuery will:
    • Load page using AJAX instead of the normal HTTP protocol
    • Parse content and add it to the DOM
    • Auto-initized widgets
    • Animate page using transition
  • However, you can load a page without AJAX by usng two major methods:
    • <a href="mypage.html" rel="external">Link text goes here</a>
    • <a href="mypage.html" data-ajax="false">Link text goes here</a>
  • Loading a page without AJAX is useful when you want to load an external page from another source that does not have the data-role="page" attribute assigned to it which you may not have control over. Anything outside a "page" with a data-role="page" will not be displayed. Page will get loaded as a regular page without the jQuery toolbars, etc.
  • When using an AJAX request, the page has to run on a web server. So, using Chrome or Safari will give you an error. TIP: Aptana Studio has a built-in web server.

External Toolbars

External toolbars DOES NOT refer to toolbars that are OUTSIDE of the physical page but rather OUTSIDE the page structure:

Normal placement for Header and Footer:

<body>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed" data-theme equals a>
< h1>Header</h1>
< /div>

< div data-role="content">
< h2>Content goes here...</h2>
< /div>
<div data-role="footer" data-position="fixed" data-theme equals a>
< h4>Footer</h4>
< /div>

< /div>
< /body>

Header and Footer OUTSIDE page structure (e.g., data-role="page") of the page ITSELF:

<body>
<div data-role="header" data-position="fixed" data-theme equals a>
< h1>Header</h1>
< /div>
<div data-role="page" id="page">
<div data-role="content">
<h2>Content goes here...</h2>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme equals a>
< h4>Footer</h4>
< /div>

</body>

If you were to load this page, you would not see the header and footer because they are outside of the page structure of the page. Since the header and footer are declared outside of the page they are not loaded automatically, you have to do that manually using JavaScript in the <head> tag.

<script>
$(function(){
$( "[ data-role='header'], [data-role='footer']").toolbar();
});
</script>


NOTE: This is what jQuery does automatically if in the page structure. The code will look for the element in the array and apply the toolbar function to it.

The main advantage of placing the header and footer OUTSIDE of the page structure is so that you can load an external page that is not loaded by AJAX so that the header and footer will persist if you use some JavaScript.


NOTE:

The data-therme="a" and data-position = "fixed" are set since the header and footer are not loaded they will not inherit the CSS styling properties.

Grid

Because the grid structure in invisible, you can style it with CSS to see its structure:

.content div div p {background-color:lightGray; border: 1px solid red; height:75px; margin:0;}

jQuery Mobile Events

jQuery Mobile Events Touch events

  • Touch Events — touch gestures (e.g., taps, tap-and-hold, and swipe right/swipe left)
  • Scroll Events — cross platform scroll events (e.g., start and stop)
  • Page Events — page events (load/unload, show/hide, create, and errors)
  • Orientation Events — native orientation events on some devices. jQuery Mobile also has its own techniquers for devices that does not support orientation events.

<script>
$(document).on('pagecreate', function (evt) {

$("#firstpage").on("tap", function (e) {
alert("you tapped!");
});

$("#firstpage").on("swiperight", function (e) {
alert("you swiped right!");
});

$("#firstpage").on("swipeleft", function (e) {
alert("you swiped left!");
});

});
</script>

The above code is not jQuery Mobile but just jQuery that listens for a page create event and then registers a page element for a tap swipe right and swipe left. To test this is a browser click to simulaate a tap, click (or right-click) and drag right to simulated a swipt-right and click (or right-click) and drag left to simulate a swipt-left. Normally, this would require custome code for each mobile browers.

Configuring jQuery Mobile defaults

You can config some of jQuery defaults PROGRAMITICALLY using jQuery API instead of classes and data-roles. To do this, you need to use the mobileinit event that is fired when the framework loads. As a result is has to be placed BETWEEN the jQuery and jQueryMobile JavaScript files. You can go the the jQueryMobile web site to see what you can config in jQuery.

<script src=" jquery.js">

<!-- mobileinit fires immediately, so we need to define our event handler
before including the jQuery Mobile library -->
< script>
$(document).on("mobileinit", function(evt) {
alert("Mobile initialization event fired");
});
< /script>

// Change some settings
$.mobile.defaultPageTransition = "slide";
$.mobile.pageLoadErrorMessage = "There was a system error!";
$.mobile.pageLoadErrorMessageTheme = "b";

</script src=" jquery.mobile.js">

Working With Form Elements

  • Form elements created with HTML5  is more robust for mobile apps particularily when using jQueryMobile. By default, form submission is done with AJAX. Once the form is submitted, jQuery INTERCEPTS and SUBSTITUTES its own AJAX-driven submission. When the server sends its response, jQueryMobile inserts it into the page DOM.  AJAX submission cna be avoided by adding data-ajax="false" attribute to the <form> tag.
  • All form elements are styled to be mobile-friendly and touch-enabled. You can avoid this styling by add a data-role="none" attribute to a form element.
  • To make form element responsive, wrap each label and form element combo within a <div> tag with a data-role="fieldcontain" attribute.
    Dreamweaver's Timesaving Tips:
    • If you used the Insert panel instead of the Form panel, the <div> tag with the data-role="fieldcontain" attribute will AUTOMATICALLY be wrapped around the label and form element.
    • If you used the Properties panel, you can change THREE attributes all at one time by entering a value in the name field of the <input> tag. (e.g., the for attribute in the <label> tag and the name and id attributes in the <input> tag).

      From This:
      <div data-role="fieldcontain">
       <label for="textinput">First Name:</label>
       <input type="text" name="textinput" id="textinput" value=""/>
      </div>

      To This:

      <div data-role="fieldcontain">
        <label for="firstName">First Name:</label>
        <input type="text" name="firstName" id="firstName" value=""/>
      </div>
  • The new HTML5 autofocus and require attributes are used to prompt a user to enter data into a specific field and to make a field a required field.
  • jQueryMobile allows for two types of select list: Standard and Custom. To change a standard to a custom select list add data-native-menu = "false" attribute to the select tag. The Custom select list is more mobile-friendly. To group similar <option> tags, add a <optgroup label="OptionLabelName"> between the option groups you want use. This will also cause the list to show as a dialog box on a small device.
  • Depending on the input form elements, a user will get a different keyboard on a mobile device. For example, the @ symbol and period (.) are shown on the keyboard for email address input form type.
  • All forms and form elements must have unique IDs globally across the entire application because of how jQuery Mobile maintains everything in a single DOM object.
  • Click here for form page example