语言

Menu
Sites
Language
Block section change

Hi,

I'm using the section changer widget and I would like to cancel the swipe/section change. Something similar to prevent an horizontal scroll using the javascript function evt.preventDefault(). Here is an simple example that combine section changer widget with the envent_handling_prevent_default.html example from http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1/. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <title>Wearable UI</title>
    <link rel="stylesheet"  href="lib/tau/themes/default/tau.min.css">
    <!-- load theme file for your application -->
     <style>
        #touchable{
            width: 300px;
            height: 100px;
            background-color: Yellow;
        }
    </style>

</head>
<body>
<div id="hasSectionchangerPage" class="ui-page">
   <header class="ui-header">
      <h2 class="ui-title">SectionChanger</h2>
   </header>
   <div id="sectionchanger" class="ui-content">
      <!--Section changer has only one child-->
      <div>
         <section>
            <h3>LEFT1 PAGE</h3>
         </section>
         <section class="section-active">
            <h3>MAIN PAGE</h3>
            <div id="touchable">
        Touch and move this box with one finger.</div>
    <div id="log">
    </div>
            
         </section>
         <section>
            <h3>RIGHT1 PAGE</h3>
         </section>
      </div>
   </div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.min.js"></script>
<!-- load javascript file for your application -->
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script type="text/javascript">
(function() 
{
   var page =  document.getElementById("hasSectionchangerPage"),
   element  =  document.getElementById("sectionchanger"),
   sectionChanger, idx=1;

   page.addEventListener("pageshow",function() 
   {
      /* Create the SectionChanger object */
      sectionChanger = new tau.SectionChanger(element, 
      {
         circular: false,
         orientation: "horizontal",
         useBouncingEffect: true
      });
   });

   page.addEventListener("pagehide", function() 
   {
      /* Release the object */
      sectionChanger.destroy();
   });
})();

var log = document.getElementById("log");
   var touchable = document.getElementById("touchable");

   /* touchmove event */
   touchable.addEventListener("touchmove", phaseCalcul, false);
    
   function phaseCalcul(e) 
   {
      var pTarget = e.touches.item(0);
    
      log.innerHTML =
         '<strong>pageX:</strong> ' + pTarget.pageX + 
         '<br><strong>pageY:</strong> ' + pTarget.pageY + 
         '<br><strong>clientX:</strong> ' + pTarget.clientX + 
         '<br><strong>clientY:</strong> ' + pTarget.clientY + 
         '<br><strong>screenX:</strong> ' + pTarget.screenX + 
         '<br><strong>screenY:</strong> ' + pTarget.screenY;
    
      e.preventDefault();
   }

</script>
</html>

What I'm looking for in my real project is to use drag and drop some elements without change section, any ideas? By the way, I'm using the wearable IDE.

Thank you very much

列表