Swipe

The swipe component shows a list view on the screen where the list items can be swiped vertically to show a menu.

Table of Contents

1. Default Selectors
2. Manual Constructor
3. HTML Examples
4. Methods
5. Opening the Swipe component

Default Selectors

By default, all HTML elements with the data-role="swipe" attribute are displayed as swipes.

Manual Constructor

To manually create a swipe component, use the component constructor from the tau namespace (RECOMMENDED):

<div id="swipe">
   <div data-role="swipe-item-cover">
      Cover - swipe to open
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
   </div>
</div>
<script>
   var swipeElement = document.getElementById("swipe"),
       swipe = tau.widget.Swipe(swipeElement);
</script>

If the jQuery library is loaded, you can use its method (support for backward compatibility):

<div id="swipe">
   <div data-role="swipe-item-cover">
      Cover - swipe to open
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
   </div>
</div>
<script>
   var swipe = $("#swipe").swipe();
</script>

HTML Examples

To create a swipe component using the data-role attribute with one covered item:

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Cover - swipe to open
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
   </div>
</div>

Methods

To call a method on the component, use one of the existing APIs:

• TAU API (RECOMMENDED):

  var swipeElement = document.getElementById("swipe"),
      swipe = tau.widget.Swipe(swipeElement);
  swipe.methodName(methodArgument1, methodArgument2, ...);
  

• jQuery API (support for backward compatibility):

  $(".selector").swipe("methodName", methodArgument1, methodArgument2, ...);
  

Summary

open() 

boolean opened() 

close() 

open

Runs opening animations.

open() 

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
   swipeWidget.open();
<script>

Code example (jQuery API support for backward compatibility):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   $("#swipe").swipe("open");
</script>

opened

Checks whether a swipe element is opened.

boolean opened() 

Return value:

Type	Description
boolean	True, if the swipe element is opened.

Code example (TAU API RECOMMENDED):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
   isOpened = swipeWidget.opened();
<script>

Code example (jQuery API support for backward compatibility):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var isOpened = $("#swipe").swipe("opened");
</script>

close

Runs closing animations.

close() 

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
   swipeWidget.close();
<script>

Code example (jQuery API support for backward compatibility):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   $("#swipe").swipe("close");
</script>

Opening the Swipe component

There are 3 ways to open swipe component (uncover the items of the component):

• Open by swiping over an element:

  <div id="swipe" data-role="swipe">
     <div data-role="swipe-item-cover">
        Cover - swipe to open
     </div>
     <div data-role="swipe-item">
        <div data-role="button" data-inline="true">First item</div>
     </div>
  </div>
  

• Open manually by using the open method with the TAU API (RECOMMENDED):

  <div id="swipe" data-role="swipe">
     <div data-role="swipe-item-cover">
        Cover - swipe to open
     </div>
     <div data-role="swipe-item">
        <div data-role="button" data-inline="true">First item</div>
     </div>
  </div>
  <script>
     var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
     swipeWidget.open();
  <script>
  

• Open manually by using the jQuery API (support for backward compatibility):

  <div id="swipe" data-role="swipe">
     <div data-role="swipe-item-cover">
        Cover - swipe to open
     </div>
     <div data-role="swipe-item">
        <div data-role="button" data-inline="true">First item</div>
     </div>
  </div>
  <script>
     $("#swipe").swipe("open");
  <script>