javascript - How to have a custom button within a list view in JQuery Mobile? - Stack Overflow

admin管理员组

文章数量:1415645

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

Share Improve this question Follow asked Jun 25, 2012 at 18:59 AGEAGE 3,79233 gold badges4242 silver badges6262 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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!

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>

本文标签： javascriptHow to have a custom button within a list view in JQuery MobileStack Overflow