I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.

As an illustration to what I want to achieve, take a look at .html.

Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.

Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!

I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.

As an illustration to what I want to achieve, take a look at http://jquerymobile./test/docs/buttons/buttons-icons.html.

Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.

Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!

• javascript
• jquery
• html
• listview
• jquery-mobile

• You intent to have functionality like this? where each list item has a button on right which does specific action jquerymobile./test/docs/buttons/buttons-icons.html#/test/… – uday Commented Jun 25, 2012 at 19:05
• I mean it to work like this: within the list-divider I would like to add a button on the right hand side, such that it looks almost as a header bar would organize a button on its right hand side. A split button list is not a bad idea, if I cannot successfully do this I will go for split button list. Any ments? – AGE Commented Jun 25, 2012 at 23:25

3 Answers 3

This is what I was looking for:

<ul data-role="listview">
    <li data-role="list-divider">
        Fruits
        <span class="ui-li-count">
            <a href="#" data-role="none" data-theme="b">
                Button
            </a>
        </span>
    </li>
    <li>Apples</li>
    <li>Grapes</li>
    <li>Others</li>
</ul>

Note that the list divider contains a SPAN which acts as a button... quite ingenious :)

Anyways, thanks for your help!

You are looking for a Split Button list

This is an example you can put two icon buttons inside:

<ul data-role="listview" data-inset="true" style="min-width:210px;">
                        <li data-role="list-divider">Opciones de platillo</li>
                        <li><a href="#" >Notas</a></li>
                        <li>
                                Tiempo
                           <div style="float: right;">
                              <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
                              <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
                           </div>
                        </li>
                        <li>
                                Comensal
                           <div style="float: right;">
                              <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
                              <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
                           </div>
                        </li>
                        <li><a href="#">Modificadores</a></li>
                        <li><a href="#">Terminadores</a></li>
                    <ul>
                </div>