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

4 posts, 0 answers
  1. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 28 Aug 2013 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Sep 2013 Link to this post

    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.
  3. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 02 Sep 2013 Link to this post

    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
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Sep 2013 Link to this post

    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.
Back to Top