jQuery Mobile listview submenus

Question

If I read the documentation correctly, I understand that nested lists were removed from JQM 1.3.1, which means I can't use a list format such as this:

<ul data-role="listview">
    <li></li>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        <ul>
    </li>
</ul>

I wasn't sure what the proper way to do nested lists was now, so I did this:

<ul data-role="listview"><li></li></ul>
<ul data-role="listview"><li></li></ul>
<ul data-role="listview"><li></li></ul>
<ul data-role="listview" class="submenu">
    <li></li>
    <li></li>
    <li></li>
</ul>

So technically each list item is just a listview with a single list item and any submenus are normal listview lists.

Is this valid? I mean, it works, just wondering if there was a better way.

you could replace listview with collapsible sets (Accordions). — Omar
– Omar, Commented Jul 5, 2013 at 11:15
@Omar I should have mentioned that every item needs to be displayed at all times. The submenu items just have a different style. — Bobe
– Bobe, Commented Jul 5, 2013 at 12:12

Gajotres · Accepted Answer · 2013-07-05 13:30:55Z

Nested lists still work, they are just deprecated from version 1.3.0.

Official documentation: http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/ just search for a chapter called: Nested.

Working jQuery Mobile 1.3.1 jsFiddle example: http://jsfiddle.net/Gajotres/xeggf/

They are probably going to be removed in version 1.4 according to an official blog.

Lets go further. New way of handling nested listviews don't exist. Omar already told you closest thing you can do now and it is listviews nested into collapsible elements (one example can be found in jsFiddle example posted on the top of an answer). Nothing else exist, at lease not out of box.

New solution requires some development and I will leave it to you. This is an advised solution (by jQuery Mobile developers).

What you need is original listview like when working with nested listviews. But instead of nesting you will dynamically create new page, populate it with new listview (this one will act as a nested listview). When you don't need it any more just remove it and create a new one when time comes.

Collectives™ on Stack Overflow

jQuery Mobile listview submenus

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related