I am looking to keep my navbar HTML markup in a centralized location for easy editing. Currently, the body content of my index.html file appears like this:
<div data-role="page" id="SomePage">
<div data-role="header">
<h1>This is Page 1</h1>
</div>
<div data-role="navbar"></div>
</div>
and I reference these files in the header as follows:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" language="javascript" src="app.js"></script>
In my app.js file, I attempt to load the Nav bar. I have tried two different approaches:
The first method:
var NavBar = function() {
$('div[data-role="navbar"]').html('<ul>' +
'<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
'<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
'<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
'</ul>');
}
$(document).ready(function() {
NavBar();
});
This approach displays the links on the page but without the list-style formatting.
The second method attempted was:
var NavBar = function() {
$('div:jqmData[role="navbar"]').html('<ul>' +
'<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
'<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
'<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
'</ul>');
}
$(document).ready(function() {
NavBar();
});
However, this method does not display the links at all.
I am seeking advice on how to create a function that centralizes the loading of the 'navbar' while applying jQuery Mobile styling consistently.