jQuery mobile：使用按钮的正确方法？答案

【问题标题】：jQuery mobile : correct way to use button?jQuery mobile：使用按钮的正确方法？
【发布时间】：2012-05-31 11:19:03
【问题描述】：

我从 jQuery mobile 开始，但我的按钮有些问题。

Web 应用程序是一个购物清单。它显示要购物的商品列表，并在页脚按钮中显示我可以对商品执行的操作。

动作是：

要购买的物品数量增加
减少购买物品的数量
在列表中上移项目
在列表中下移项目
添加新项目
删除项目
修改物品文字说明

这些操作是在 javascript 中实现的，并且工作正常。我遇到的问题是控制按钮和相关操作。

根据经验，我发现对于递增和递减而言，使用处于活动状态的按钮会更方便，对于其他操作，最好使用选中的项目并在按钮被按下。添加项目时，该项目将插入到所选项目之前，如果在未选择任何项目时按下，则新项目将附加到列表中。

我也想要两种模式。在一种模式下，仅显示递增和递减按钮，用户可以更新其列表中的项目数。在另一种模式下，用户正在修改其列表。在第二种模式下，需要选择的项目。

我设法通过使用 .on() 方法作为委托来关联我的项目列表的默认操作。

$('#itemList').on( "click", ".item", function(evt)
    { ctrl.doAction($(evt.currentTarget)); });

这是我用来测试第一种模式的html代码。

<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
    <a href="" data-role="button" data-icon="plus" id="btnPlus"> Plus </a>
    <a href="" data-role="button" data-icon="minus" id="btnMinus"> Minus </a>
</div>
<!-- /footer -->

我应该把什么作为 href 值？我不想重新加载页面。在某些示例中，我看到“#”。

这就是我将动作与按钮相关联的方式：

$('#btnPlus').on( "tap", function(evt) 
    { ctrl.doAction = ctrl.increment; });

我遇到的另一个问题是按钮单击操作没有反馈。当我单击一个按钮时，我希望它会在短时间内突出显示。这不会发生。

浏览器也有不同的行为。在 Firefox 中，单击的按钮会出现一个蓝色光环，显然表明它具有焦点。但是该按钮未显示为活动状态。

如果我输入“#!”作为 Android 上的 href （不知道是什么意思），单击的按钮显示为活动状态。

我应该使用 click 还是 tap 作为事件类型？我怎么能写 click 或 tap ？

如何实现显示为活动和非活动的两种状态按钮？如何使用操作按钮：按下时总是显示非活动和反馈？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

我自己解决了这个问题。

为了在页脚中的按钮组之间切换，我在 HTML 文档中创建了多个页脚，其中隐藏页脚中的 style="display:none"。没有这个的会显示。我为每个页脚分配了一个特定的 ID，以便我可以编写 $("#footer1").hide(); $("#footer2").show();
我有在页脚之间切换的按钮。必须使用“mouseup”事件调用页脚切换事件处理程序。这是它在 iPad 和 Android 手机上工作所必需的。
要更改外观，请不要使用此处建议的 .button() 。使用：

$("#myButton") .removeClass("ui-btn-up-a ui-btn-down-a ui-btn-hover-a") .addClass("ui-btn-up-b") .attr("数据主题", "b");

注意：我的代码中有一个错误导致绝望的头发拉扯

【讨论】：