To simplify a little, I have a basic layout with a titlebar and a footer defined as a navbar like this:
<section data-role="layout" data-id="default">
<header data-role="header" id="rounded">
<div data-role="navbar">
<span data-role="view-title">Chapter 2</span>
</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="navbar">
<a data-align="right" data-role="button" class="nav-button" href="<previous>"><i class="icon-arrow-left icon-large"></i></a>
<a data-align="right" data-role="button" class="nav-button" href="<next>"><i class="icon-arrow-right icon-large"></i></a>
</div>
<footer>
</section>
The idea is that I have multiple view like pages in a book, and I want to have a Previous and Next buttons in the footer, different on each view. I need help on how to define these links in a view file programmatically, so I can keep the footer inside the layout. I understand I can put the footer on each view, but somehow I think it would be more elegant to just have one footer in layout and then just add the links with js from the view.
Any adivice will be appreciated, thanks!
<section data-role="layout" data-id="default">
<header data-role="header" id="rounded">
<div data-role="navbar">
<span data-role="view-title">Chapter 2</span>
</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="navbar">
<a data-align="right" data-role="button" class="nav-button" href="<previous>"><i class="icon-arrow-left icon-large"></i></a>
<a data-align="right" data-role="button" class="nav-button" href="<next>"><i class="icon-arrow-right icon-large"></i></a>
</div>
<footer>
</section>
The idea is that I have multiple view like pages in a book, and I want to have a Previous and Next buttons in the footer, different on each view. I need help on how to define these links in a view file programmatically, so I can keep the footer inside the layout. I understand I can put the footer on each view, but somehow I think it would be more elegant to just have one footer in layout and then just add the links with js from the view.
Any adivice will be appreciated, thanks!
3 Answers, 1 is accepted
0
Andrew Paulson
Top achievements
Rank 2
Rank 2
answered on 14 Dec 2012, 10:33 PM
You should use Multiple Layouts and assign the layout to the view upon or before changing to that view.
set the buttons in each view to do what you like, and switch your views useage based on your needs. this keeps your buttons organized and your js light.
<div data-role="layout" data-id="mobile1" id="tabstrip"></div>
<div data-role="layout" data-id="mobile2" id="tabstrip"></div>
<div data-role="layout" data-id="mobile3" id="tabstrip"></div>
<div data-role="view" id="myView" data-layout="mobile1"><div>
in your script
$("#myView").attr("data-layout","mobile2");
//Not sure if this is nessesary
kendo.mobile.init($("myView"));
app.navigate("#myView");
set the buttons in each view to do what you like, and switch your views useage based on your needs. this keeps your buttons organized and your js light.
<div data-role="layout" data-id="mobile1" id="tabstrip"></div>
<div data-role="layout" data-id="mobile2" id="tabstrip"></div>
<div data-role="layout" data-id="mobile3" id="tabstrip"></div>
<div data-role="view" id="myView" data-layout="mobile1"><div>
in your script
$("#myView").attr("data-layout","mobile2");
//Not sure if this is nessesary
kendo.mobile.init($("myView"));
app.navigate("#myView");
0
Yrjo
Top achievements
Rank 1
Rank 1
answered on 14 Dec 2012, 11:29 PM
Not sure if I understand, Andrew. perhaps I have not been clear enough. I have one layout but many views in separate files, say, index.html as my layout (maybe with a starting view) but several views, view01.html, view02.html etc. acting as pages that all use the same layout. Their basic structure is something like this
/* view02.html */
I cannot figure out how to write the script part in my viewXXX.html file so that is writes the current navigation links in layout footer, already written in index.html as prototypes, i.e. replacing those <previous> and <next> placeholders with proper values depending which view is currently loaded to the layout.
/* view02.html */
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<div data-role="view" data-layout="default">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script> $(document).ready(function(){
// set the href in layout footer's previous button tp 'view01.html'
// set the href in layout footer's next button to 'view03.html'
});
</script
</body>
</html>
0
Accepted
Hello Yrjo,
Petyo
the Telerik team
I would like to suggest an alternative approach.
You can use handle the button widget click event, perform the necessary logic (determine previous/next page), and use the application navigate method from there.
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!