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.
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.
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;}
<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.
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">
<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>