Swipe

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

Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import tau.support-2.3.js.

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

Method Description
open() 

Runs opening animations.

boolean opened() 

Checks whether a swipe element is opened.

close() 

Runs closing animations.

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>