List Divider

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

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.