Jquery mobile navbar with split buttons and drop down

Question

I need a drop down menu with split buttons... Something like a navbar composed by split buttons, every button will have some text and an arrow, if you click the text it calls an handler (that will show/hide stuff), if you click the arrow it opens a drop down under the button.

I think I can do it with a JQuery mobile split list but I still need to list the buttons horizzontally and open a drop down below them...

This is what I have so far in fiddle

I still need to open the drop down when the click is on the icon, like HERE but when the click is on the icon.

So how can I do this? Is there a way to di it with a navbar or a plugin?

Be aware that I cant use a normal drop down menu because Touch Screens dont have mouse over events...

Answer 1

Rather than trying to use split lists how about creating two navigation buttons for each split-list-item. One would have the text and the other would have the icon:

<div data-role="foooter" data-position="fixed">
    <div class="ui-grid-c">
        <div class="ui-block-a">
            <a data-role="button" data-shadow="false" data-corners="false" href="#">Text 1</a>
        </div>
        <div class="ui-block-b">
            <a data-role="button" data-icon="delete" data-iconpos="notext" data-shadow="false" data-corners="false" href="#">Text 2</a>
        </div>
        <div class="ui-block-c">
            <a data-role="button" data-shadow="false" data-corners="false" href="#">Text 2</a>
        </div>
        <div class="ui-block-d">
            <a data-role="button" data-icon="home" data-iconpos="notext" data-shadow="false" data-corners="false" href="#">Text 2</a>
        </div>
    </div>
</div>

Here is a demo: http://jsfiddle.net/neSDT/

It certainly needs polishing but this may get you started.