I am developing an app that has sever views inside a folder called views. from within my main index.html file if i link to any view within the view folder it does not load in my styles nor transitions all i get is a blank white screen with a word "back" which is for the button in the navbar of the view that loads. Below are the sample code i used.
Index.html file code below.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="defaultlayout">
<!--View content will render here-->
</section>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<a class="button" data-role="button" href="views/about.html">Home</a>
</div>
<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
Another view
</div>
<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
another view 2
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>
Here is the code for my about.html
<div data-role="view" id="secondview" data-layout="defaultlayout" data-title="Local View">
<div ><p>Hi, I'm a local view.</p></div>
</div>
Index.html file code below.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="defaultlayout">
<!--View content will render here-->
</section>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<a class="button" data-role="button" href="views/about.html">Home</a>
</div>
<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
Another view
</div>
<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
another view 2
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>
<div data-role="view" id="secondview" data-layout="defaultlayout" data-title="Local View">
<div ><p>Hi, I'm a local view.</p></div>
</div>