jQuery Forum

In the following code, I would like to get the object on which you swiped.

I would like to use the navbar or ui-grid style buttons (evenly spaced horizontally) in a list-divider element to act as a filter for the list contents.


This style is what I'm looking for:

<div data-role="navbar">
  <ul>
    <li><a href="?asc">ascending</a></li>
    <li><a href="?desc">descneding</a></li>
    <% end %>
  </ul>
</div>


This style also would work:

<fieldset class="ui-grid-a">
  <div class="ui-block-a"><button type="submit" data-theme="c">ascending</button></div>
  <div class="ui-block-b"><button type="submit" data-theme="b">descending</button></div>      
</fieldset>


But when you embed either in a list, things don't quite work out.  If you put the navbar div in an li, it turns it into a single blank button (similar result if you toss the div between two li's).  When you put more than one button or link in an li, jQuery mobile turns it into a split button list (the type with a button link on the left and an arrow link on the right).  Here's an example list with a comment where the above would go:

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
  <li data-role="list-divider">
    List Title
  </li>
  <li data-role="list-divider">
    <!-- filters go here -->
  </li>
  <li>
    <a href="#list1">list contents</a>
    <a href="#list2">list contents</a>
  </li>
</ul>

Thanks in advance, all.