如何在 JQuery Mobile 的列表视图中有一个自定义按钮？答案

【问题标题】：How to have a custom button within a list view in JQuery Mobile?如何在 JQuery Mobile 的列表视图中有一个自定义按钮？
【发布时间】：2012-06-25 18:59:51
【问题描述】：

我希望在列表视图标题的右侧出现一个名为“单击我”的自定义按钮，该按钮将通过“单击时”事件执行操作。据我所知，JQuery 没有实现这一目标的标准方法，但也许您知道如何实现这一目标。

为了说明我想要实现的目标，请查看http://jquerymobile.com/test/docs/buttons/buttons-icons.html。

现在想象一下，您正在查看数据图标位于右侧的列表标题，而不是显示“单击我”的图标。此外，List Header 不能像其元素一样可点击，而数据图标必须是此处唯一可点击的元素。

如果您有任何想法，请告诉我，即使由于 JQuery 根本无法实现，谢谢！

【问题讨论】：

您打算拥有这样的功能吗？每个列表项在右侧都有一个按钮，可以执行特定操作jquerymobile.com/test/docs/buttons/buttons-icons.html#/test/…
我的意思是这样工作：在列表分隔符中，我想在右侧添加一个按钮，这样它看起来几乎就像标题栏会在其右侧组织一个按钮手边。拆分按钮列表不是一个坏主意，如果我不能成功做到这一点，我会选择拆分按钮列表。有cmets吗？

标签： javascript jquery html listview jquery-mobile

【解决方案1】：

这就是我要找的东西：

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

请注意，列表分隔符包含一个充当按钮的 SPAN...非常巧妙:)

无论如何，谢谢你的帮助！

【讨论】：

【解决方案2】：

您正在寻找Split Button list

【讨论】：

我的意思是这样工作：在列表分隔符中，我想在右侧添加一个按钮，这样它看起来几乎就像标题栏会在其右侧组织一个按钮手边。拆分按钮列表不是一个坏主意，如果我不能成功做到这一点，我会选择拆分按钮列表。有cmets吗？

【解决方案3】：

这是一个你可以在里面放两个图标按钮的例子：

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

【讨论】：