List Divider

The list divider component creates a list separator, which can be used for grouping list items.

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.
Since 2.4, it has been renamed to GroupIndex. To use Group index in Listview, see Listview Component.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options

Default Selectors

By default, all elements with the data-role="listdivider" or class="ui-listdivider" attribute are displayed as list dividers.

<ul data-role="listview">
   <li data-role="list-divider">Item styles</li>
   <li><a href="#">Normal lists</a></li>
   <li><a href="#">Normal lists</a></li>
   <li><a href="#">Normal lists</a></li>
</ul>

Manual Constructor

To manually create a list divider component, use the component constructor from the tau namespace:

<ul data-role="listview">
   <li>Item</li>
   <li id="listdivider">Divider</li>
   <li>Item</li>
   <li>Item</li>
</ul>
<script>
   var listdivider = tau.widget.ListDivider(document.getElementById("listdivider"));
</script>

If the jQuery library is loaded, you can use its method:

<ul data-role="listview">
   <li>Item</li>
   <li id="listdivider">Divider</li>
   <li>Item</li>
   <li>Item</li>
</ul>
<script>
   $("#listdivider").listdivider();
</script>

HTML Examples

  • To create a list divider that shows the divider press effect (data-folded="true") and no divider line (data-line="false"):

    <ul data-role="listview">
       <li data-role="list-divider" data-folded="true" data-line="false">Item styles</li>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
    </ul>
    
  • To create a list divider that uses the checkbox style:

    <ul data-role="listview">
       <li data-role="list-divider" data-style="check" class="ui-li-checkbox">
          <a href="#"><input type="checkbox" name="check">Select All</a>
       </li>
       <li><a href="#"><input type="checkbox" name="select-check2">Item</a></li>
       <li><a href="#"><input type="checkbox" name="select-check1">Item</a></li>
       <li><a href="#"><input type="checkbox" name="select-check3">Item</a></li>
    </ul>
    <script>
       var selectAll = tau.widget.Checkboxradio(document.getElementsByName("check")[0]),
           check = [];
    
       check[0] = tau.widget.Checkboxradio(document.getElementsByName("select-check1")[0]);
       check[1] = tau.widget.Checkboxradio(document.getElementsByName("select-check2")[0]);
       check[2] = tau.widget.Checkboxradio(document.getElementsByName("select-check3")[0]);
    
       function checkAllCheckbox() 
       {
          var val = selectAll.value() === null ? false : true;
          for (var i in check) 
          {
             if (check.hasOwnProperty(i)) 
             {
                check[i].element.checked = val;
                check[i].refresh();
             }
          }
       }
       selectAll.on("change", checkAllCheckbox);
    </script>
    
  • To create a list divider that uses the dialogue style:

    <ul data-role="listview">
       <li data-role="list-divider" data-style="dialogue">Items</li>
       <li class="ui-li-dialogue">Item</li>
       <li class="ui-li-dialogue">Item</li>
       <li class="ui-li-dialogue">Item</li>
    </ul>
    

Options

The following table lists the options for the list divider component.

Option Input type Default value Description
data-folded boolean false Sets whether to show the divider press effect.
data-line boolean true Sets whether to show the divider line.
data-style "normal" | "checkbox" | "dialogue" "normal" Style of the list divider.