0

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

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

行动是：

  1. 增加要购买的物品数量
  2. 减少要购买的物品数量
  3. 在列表中向上移动项目
  4. 在列表中向下移动项目
  5. 添加新项目
  6. 删除项目
  7. 修改物品文字描述

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

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

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

我设法通过使用 .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 ？

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

4

1 回答 1

0

我自己解决了这个问题。

  1. 为了在页脚中的按钮组之间切换，我在我的 HTML 文档中创建了多个页脚，其中 style="display:none" 在隐藏的页脚中。没有这个的会显示。我为每个页脚分配了一个特定的 ID，以便我可以编写 $("#footer1").hide(); $("#footer2").show();

  2. 我有在页脚之间切换的按钮。必须使用“mouseup”事件调用页脚切换事件处理程序。这是它在 iPad 和 Android 手机上工作所必需的。

  3. 要更改外观，请不要使用此处建议的 .button() 。利用：

    $("#myButton") .removeClass("ui-btn-up-a ui-btn-down-a ui-btn-hover-a") .addClass("ui-btn-up-b") .attr( “数据主题”，“b”）；

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

于 2012-06-01T10:55:19.980 回答