Hi,
I am creating a Kendo Mobile SPA, but would like to separate the views into their own html files because there will be more than a few views. So I am using remote views.
With remote views, it looks like that in order for the <a> tag to work you need to supply it with a Kendo Mobile data-role either a button, tab strip or list. Examples:
<ul data-role="listview" data-style="inset" data-type="group">
<li>Sources
<ul>
<li><a href="#secondview">Local View</a></li>
<li><a href="remoteview.html">Remote View</a></li>
</ul>
</li>
</ul>
Or
<a href="remoteview.html" data-role="button">Remote View</a>
Just using a regular link to a remote view like this will not work (Without the data-role, Kendo Mobile doesn't know to handle this as an ajax call to a remote view and just loads the html like it's a whole new page):
<a href="remoteview.html">Remote View</a>
I have images in my app that are touchable and will navigate to other views, so my idea to achieve the SPA with remote views is to use data-role of button and try to set the button background image to the image like this:
<a href="remoteview.html" data-role="button" style="background-color: white; color: black;"><img width="50%" src="images/Button.png" alt="image"><br/>Remote View</a>
Which doesn't work totally. The first time the button is displayed the image is really small—this navigates correctly to the remote view, however you have to navigate and then go back to see the button have the correct size.
Anyway, is there a better way to set a background image with the Kendo Mobile button?
Thanks,
Derrick
I am creating a Kendo Mobile SPA, but would like to separate the views into their own html files because there will be more than a few views. So I am using remote views.
With remote views, it looks like that in order for the <a> tag to work you need to supply it with a Kendo Mobile data-role either a button, tab strip or list. Examples:
<ul data-role="listview" data-style="inset" data-type="group">
<li>Sources
<ul>
<li><a href="#secondview">Local View</a></li>
<li><a href="remoteview.html">Remote View</a></li>
</ul>
</li>
</ul>
Or
<a href="remoteview.html" data-role="button">Remote View</a>
Just using a regular link to a remote view like this will not work (Without the data-role, Kendo Mobile doesn't know to handle this as an ajax call to a remote view and just loads the html like it's a whole new page):
<a href="remoteview.html">Remote View</a>
I have images in my app that are touchable and will navigate to other views, so my idea to achieve the SPA with remote views is to use data-role of button and try to set the button background image to the image like this:
<a href="remoteview.html" data-role="button" style="background-color: white; color: black;"><img width="50%" src="images/Button.png" alt="image"><br/>Remote View</a>
Which doesn't work totally. The first time the button is displayed the image is really small—this navigates correctly to the remote view, however you have to navigate and then go back to see the button have the correct size.
Anyway, is there a better way to set a background image with the Kendo Mobile button?
Thanks,
Derrick