CODEWITHSUNDEEP
javascriptjqueryhtmllistviewjquery-mobile
AGE
AGE

Reputation: 3792

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

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!

Upvotes: 0

Views: 7216

Answers (3)

AGE
AGE

Reputation: 3792

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!

Upvotes: 2

Jorge Mejia
Jorge Mejia

Reputation: 1163

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>

    Upvotes: 1

    Nirmal Patel
    Nirmal Patel

    Reputation: 5168

    You are looking for a Split Button list

    Upvotes: 1

    Related Questions