Below is my code. I cannot get the Drawer to work. What am I doing wrong?
Thank you!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App #1</title>
<link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/custom.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/kendo.web.min.js" type="text/javascript"></script>
<script src="../js/kendo.mobile.min.js" type="text/javascript"></script>
<script src="../examples/content/shared/js/console.js"></script>
</head>
<body>
<!-- Main View -->
<div id="mainView" data-role="view" data-title="View" >
<h1>App #1</h1>
<p>REST API.</p>
</div>
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"></div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
</ul>
</li>
</ul>
</div>
<!-- Layout -->
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
</div>
</div>
<!-- Footer Nav Bar -->
<div data-role="footer">
<div data-role="tabstrip">
<a href="default.html" data-icon="favorites">Home</a>
<a href="views/view2.html" data-icon="favorites">View All Records</a>
<a href="views/view4.html" data-icon="favorites">Insert New Record</a>
</div>
</div>
</div>
<script>
// reset global drawer instance, for demo purposes
kendo.mobile.ui.Drawer.current = null;
</script>
<style>
.km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
.km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
.km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
.km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
{
background-color: #4e4e4e;
color: #fff;
}
.km-ios #my-drawer .km-group-title,
.km-blackberry #my-drawer .km-group-title
{
background-color: #6e6e6e;
color: #fff;
}
.km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
.km-inbox:before, .km-inbox:after { content: "\E0B0"; }
.km-sent:before, .km-sent:after { content: "\E0C6"; }
.km-trash:before, .km-trash:after { content: "\E0C3"; }
.km-spam:before, .km-spam:after { content: "\E0C5"; }
.km-star:before, .km-star:after { content: "\E0D7"; }
.km-settings:before, .km-settings:after { content: "\E0DA"; }
.km-off:before, .km-off:after { content: "\E0B9"; }
.inboxList
{
font-size: .8em;
}
.inboxList p,
.inboxList h2,
.inboxList h3
{
margin: 5px 2px;
}
.inboxList p,
.inboxList h3
{
color: #777;
}
.inboxList h3.time
{
color: #369;
float: left;
margin-right: 10px;
}
</style>
<script>
window.app = new kendo.mobile.Application(document.body, { layout: "mainLayout" });
//var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thank you!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App #1</title>
<link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/custom.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/kendo.web.min.js" type="text/javascript"></script>
<script src="../js/kendo.mobile.min.js" type="text/javascript"></script>
<script src="../examples/content/shared/js/console.js"></script>
</head>
<body>
<!-- Main View -->
<div id="mainView" data-role="view" data-title="View" >
<h1>App #1</h1>
<p>REST API.</p>
</div>
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"></div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
</ul>
</li>
</ul>
</div>
<!-- Layout -->
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
</div>
</div>
<!-- Footer Nav Bar -->
<div data-role="footer">
<div data-role="tabstrip">
<a href="default.html" data-icon="favorites">Home</a>
<a href="views/view2.html" data-icon="favorites">View All Records</a>
<a href="views/view4.html" data-icon="favorites">Insert New Record</a>
</div>
</div>
</div>
<script>
// reset global drawer instance, for demo purposes
kendo.mobile.ui.Drawer.current = null;
</script>
<style>
.km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
.km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
.km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
.km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
{
background-color: #4e4e4e;
color: #fff;
}
.km-ios #my-drawer .km-group-title,
.km-blackberry #my-drawer .km-group-title
{
background-color: #6e6e6e;
color: #fff;
}
.km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
.km-inbox:before, .km-inbox:after { content: "\E0B0"; }
.km-sent:before, .km-sent:after { content: "\E0C6"; }
.km-trash:before, .km-trash:after { content: "\E0C3"; }
.km-spam:before, .km-spam:after { content: "\E0C5"; }
.km-star:before, .km-star:after { content: "\E0D7"; }
.km-settings:before, .km-settings:after { content: "\E0DA"; }
.km-off:before, .km-off:after { content: "\E0B9"; }
.inboxList
{
font-size: .8em;
}
.inboxList p,
.inboxList h2,
.inboxList h3
{
margin: 5px 2px;
}
.inboxList p,
.inboxList h3
{
color: #777;
}
.inboxList h3.time
{
color: #369;
float: left;
margin-right: 10px;
}
</style>
<script>
window.app = new kendo.mobile.Application(document.body, { layout: "mainLayout" });
//var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>