How to have a custom button within a list view in JQuery Mobile?

Question

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.com/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!

You intent to have functionality like this? where each list item has a button on right which does specific action jquerymobile.com/test/docs/buttons/buttons-icons.html#/test/… — uday
– 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 comments? — AGE
– AGE, Commented Jun 25, 2012 at 23:25

AGE · Accepted Answer · 2015-06-19 02:51:35Z

2

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!

edited Jun 19, 2015 at 2:51

answered Jun 25, 2012 at 23:54

AGE

3,7873 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nirmal Patel · Accepted Answer · 2012-06-25 20:09:00Z

1

You are looking for a Split Button list

answered Jun 25, 2012 at 20:09

Nirmal Patel

5,1689 gold badges44 silver badges52 bronze badges

1 Comment

AGE Over a year ago

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 comments?

Jorge Mejia · Accepted Answer · 2014-08-15 17:08:20Z

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>

Collectives™ on Stack Overflow

How to have a custom button within a list view in JQuery Mobile?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related