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

Swipe between views code example - need a better way to do it!

3 Answers 180 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Markus
Top achievements
Rank 2
Markus asked on 28 Aug 2013, 03:13 PM
I know I ask a lot of questions. But maybe answers will also help other one day (since you get no support tickets - we need to use the forums)

I wanted

a) to have a slide transition when using tabstrip navigation
b) to be able to swipe the views from left and right to get the next view (from left if its left, from right if its right)

Here is what I have and works. Just wondering if there is a smarter way.

index.html in <body>

<!--Home-->
<div id="tabstrip-home"
     data-role="view" 
     data-title="Home"
     data-transition="slide">
 
    <div data-role="content" class="view-content">
        <div id="touch-home" data-role="touch"  data-enable-swipe="1"  data-swipe="myTouch.swipe">
            <h1>Home</h1>
            <p>Some Text</p>
        </div>
    </div>
</div>
 
<!--Settings-->
<div id="tabstrip-settings"
     data-role="view" 
     data-title="Settings"
     data-transition="slide">
 
    <div id="touch-settings" data-role="touch"  data-enable-swipe="1"  data-swipe="myTouch.swipe">
        <div data-role="content" class="view-content">
 
            <h1>Settings</h1>
            <p>Some Text</p>
 
        </div>
    </div>
</div>
 
<!--About-->
<div id="tabstrip-about"
     data-role="view" 
     data-title="About"
     data-transition="slide">
 
    <div id="touch-about" data-role="touch"  data-enable-swipe="1"  data-swipe="myTouch.swipe">
        <div data-role="content">
            <h1>About</h1>
            <p>Some Text</p>
        </div>
    </div>
 
</div>
 
<!--Web-->
<div id="tabstrip-web"
     data-role="view" 
     data-title="Web"
     data-transition="slide">
     
    <div id="touch-web" data-role="touch"  data-enable-swipe="1"  data-swipe="myTouch.swipe">
        <div data-role="content" >
            <h1>Web</h1>
            <p>Some Text</p>
        </div>
    </div>
 
</div>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout" >
 
    <!--Header-->
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
 
        </div>
    </div>
 
    <!--Footer-->
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-home" data-icon="home">Home</a>
            <a href="#tabstrip-settings" data-icon="settings">Settings</a>
            <a href="#tabstrip-about" data-icon="about">About</a>
            <a href="#tabstrip-web" data-icon="globe">Web</a>
            <a onclick="exitFromApp()" data-icon="history">Exit</a>
        </div>
    </div>
</div>


scripts/app.js

window.myTouch = {
       swipe : function(e) {
           var commingFrom = window.location.href.split("#")[1];
         
           if (e.direction == "left") {
               if (commingFrom == "tabstrip-home"  || commingFrom == "/") {
                   window.location.href = "index.html#tabstrip-settings";
               }
               else if (commingFrom == "tabstrip-settings") {
                   window.location.href = "index.html#tabstrip-about";
               }
               else if (commingFrom == "tabstrip-about") {
                   window.location.href = "index.html#tabstrip-web";
               }
               else if (commingFrom == "tabstrip-web") {
                   window.location.href = "index.html#tabstrip-home";
               }
           }
           else {
               if (commingFrom == "tabstrip-home" || commingFrom == "/") {
                   window.location.href = "index.html#tabstrip-web";
               }
               else if (commingFrom == "tabstrip-web") {
                   window.location.href = "index.html#tabstrip-about";
               }
               else if (commingFrom == "tabstrip-about") {
                   window.location.href = "index.html#tabstrip-settings";
               }
               else if (commingFrom == "tabstrip-settings") {
                   window.location.href = "index.html#tabstrip-home";
               }
           }
       }
   }


In order to know what view the user swiped from I get the href after the #

I would rather be able to pass a parameter to my swipe function because if I would use multiple .html files this solution would not work.

Looking forward to any ideas and hope this code example might help someone anyhow.

Markus

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 02 Sep 2013, 07:13 AM
Hello Markus,

in general, your approach seems correct. In one way or another, you need to store the "left" and "right" neighbors of each view. You can use an array or dictionary data structure for that in order to remove some duplication.

I am not sure that I understand the multiple html files issue, though. If you use remote views, their paths will still be appended to the fragment part of the URL (the one behind the # symbol), so the same approach will still work.

Regards,
Petyo
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Markus
Top achievements
Rank 2
answered on 02 Sep 2013, 12:34 PM
Dear Petyo

Thank's for the answer.

a) Any code example how array or dictionary data structure would be used

b) I noticed that the swiping of the home view would not work the first time. I found out that of course index.html would not carry the #tabstrip-home portion. So I figured if I load another .html page setting.html for example then it would also not have the # in it 

Furthermore since I only was looking of the #part I am totally missing out if the view would be in index.html or settings.html for example.

Markus
0
Petyo
Telerik team
answered on 05 Sep 2013, 10:17 AM
Hello Markus,

I am afraid that we do not have such example available. About your other concern - remote views also use the hash part as their identifier (the initial index.html part will remain). You can see how it works in the mobile version of our demos, which uses remote views and multiple HTML files. 

Regards,
Petyo
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Tags
General Discussion
Asked by
Markus
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Markus
Top achievements
Rank 2
Share this question
or