Navbar style buttons in list-divider
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.