This is a migrated thread and some comments may be shown as answers.

Multiple .html files and drawers issues

6 Answers 229 Views

Drawer (Mobile)

This is a migrated thread and some comments may be shown as answers.

Markus asked on 02 Dec 2013, 11:00 AM

I have an index.html with the follwing

<div data-role="view" id="view-home" data-layout="drawer-layout-home" data-title="ZUOL.CH APP">

<div>

<div data-role="content" class="view-content" >

<div id="home-vers-markus" class="boxshadow">

<h4 >

Klicken Sie oben links auf das Icon um die Navigation zu öffnen

</h4>

<h5>Firmen, Vereine, Gemeinden, Links und vielese mehr.</h5>

</div>

<div data-role="drawer" id="my-drawer-home" style="width: 270px" data-views="['/', 'view-home', 'view-home','view-witz', 'view-bild', 'view-wort']">

<h1>ZUOL.CH App</h1>

<ul data-role="listview" data-type="group" class="nobackground">

<li>

<ul>

<li data-icon="home" id="dl-firmen" class="dl-firmen">

<a href="firmen.html#firmen-home" data-transition="none">Firmen</a>

</li>

<li data-icon="contacts" id="dl-vereine" class="dl-verein">

<a href="#view-vereine" data-transition="none">Vereine</a>

</li>

<li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">

<a href="#view-gemeinden" data-transition="none">Gemeinden</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-links">

<a href="#view-links" data-transition="none">Links</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-bild">

<a href="#view-bild" data-transition="none">Bild des Tages</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-witz">

<a href="#view-witz" data-transition="none">Witz des Tages</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-links">

<a href="#view-wort" data-transition="none">Wort zum Tag</a>

</li>

</ul>

</li>

<li>

<ul>

<li data-icon="about">

<a href="#drawer-about" data-transition="none">Über ZUOL.CH</a>

</li>

<li data-icon="globe">

<a href="#drawer-web" data-transition="none" >www.zuol.ch</a>

</li>

</ul>

</li>

<li>

<ul>

<li data-icon="action" id="dl-log-out">

<a id="bt_exit" onclick="exitFromApp()" data-icon="history">

Exit

</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="drawer-layout-home">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer-home" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title">ZUOL.CH</span>

</div>

</header>

</div>

now I have an firmen.html with the following

<div data-role="view" id="view-firmen-home" data-layout="drawer-layout-home" data-title="Firmen" >

<div>

<div data-role="content" class="view-content" >

<h2>Suchen nach</h2>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li >

<a href="#view-firmen-branchen">Branche</a>

</li>

</ul>

</li>

</ul>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<a href="#view-firmen-ort">Ort</a>

</li>

</ul>

</li>

</ul>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<a href="#view-firmen-a-z">Alphabet</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="view-firmen-branchen" data-init="getBranchen" data-layout="drawer-layout-firmen" data-title="Firmen nach Branche" >

<div data-role="content" class="view-content" >

<ul id="filterable-branchen" class="listen"></ul>

</div>

<script type="text/x-kendo-tmpl" id="firmen-branchen-template">

<div class="km-listview-link">

<a href="javascript:getFirmen('branche','#:User_branche#')">

<span>#:User_branche#</span>

</a>

</div>

</script>

</div>

I want to have two use two different drawers

index.html#view-home -> data-layout-home -> #my-drawer-home
firmen.html#view-firmen-home > data-layout-home -> #my-drawer-home
firmen.hmlt#view-firmen-branche -> data-layout-firmen -> #my-drawaer-firmen

I have not been able to get this to work.

Tried: put the code below in index.html not working
Tried: put the code in firmen.html not working either

The buttons do either nothing (console shows no error) or I get an error Uncaught TypeError: Cannot call method 'enable' of undefined

How should it be done.

If you split the mobile up in different .html files and want a drawer to be access from these different files how should it be done?

Kind Regards

Markus

<div data-role="drawer" id="my-drawer-firmen" style="width: 270px" data-views="['/', 'view-firmen-branche','view-firmen-ort']">

<h1>ZUOL.CH App</h1>

<ul data-role="listview" data-type="group" class="nobackground">

<li>

<ul>

<li data-icon="home" id="dl-home" class="dl-home">

<a href="#drawer-home" data-transition="none">Zurück</a>

</li>

<li data-icon="home" id="dl-firmen" class="dl-firmen">

<a href="firmen.html#view-firmen-branche" data-transition="none">Branch</a>

</li>

<li data-icon="contacts" id="dl-vereine" class="dl-verein">

<a href="firmen.html#view-firmen-ort" data-transition="none">Ort</a>

</li>

<li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">

<a href="firmen.html#view-firmen-a-z" data-transition="none">A - Z</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="drawer-layout-firmen">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button" data-align="left"></a><a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title">ZUOL.CH - Firmen</span>

</div>

</header>

</div>

6 Answers, 1 is accepted

answered on 02 Dec 2013, 03:17 PM

drawer-remote-view.rar

Hi Markus,

Please accept my apologies for the incorrect response provided. I have created an example, showing the functionality that you are looking for. Please check it out and tell me if there is something else that I can help you with.

Regards,
Kiril Nikolov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 02 Dec 2013, 03:49 PM

icenium.zip

Dear Kiril

The problem I am havin is that I want different drawers.

can you try to extend your project so view1.html would have two views

id="bar" and id="bar2"

Where bar would use the drawer-layout and bar2 would use a newle created drawer-layout2

Markus

Kind of should work like this

- home
- - view1.html#bar
- - - - view1.html#bar2

index.html is kind of home
Link to view1.html#bar

view1.html#bar is home to the bars with links to bar2 and bar3

once you are on bar2 or bar3 you should have a different drawer for these two views.

See attsched two html files to see what I am trying to do.

Markus

answered on 03 Dec 2013, 08:16 AM

multiple-drawers.rar

Hi Markus,

In order to achieve this you will need to create separate layouts and drawers for the views which you want to use. After that in the drawer configuration, you need to set the views for which the drawer should be displayed. I have attached an example, showing a possible implementation.

Please let me know if it helps.

Regards,
Kiril Nikolov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!