Question

我开始使用jQuery mobile并且我的按钮出现问题。

网络应用程序是一个购物清单。它显示了要购物的项目列表以及我可以对项目执行的操作的页脚按钮。

行动是：

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

这些操作在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（不知道它意味着什么），点击的按钮显示为活动状态。

我应该使用点击或点按作为事件类型吗？我怎么写点击或点击？

如何实现显示为活动和非活动状态的两个状态按钮？如何使用操作按钮：按下时始终显示不活动和反馈？

Answer 1

我解决了自己的问题。

要在页脚中的按钮组之间切换，我在隐藏页脚中使用style =“display：none”在HTML文档中创建了多个页脚。没有这个的那个将被显示。我为每个页脚分配了一个特定的id，以便我可以写$（“＃footer1”）。hide（）; $（ “＃footer2”）显示（）;
我有按钮在页脚之间切换。必须使用“mouseup”事件调用页脚切换事件处理程序。这是在iPad和Android手机上运行所必需的。
要更改外观，请不要使用此处建议的.button（）。使用：

$（ “＃myButton的”） .removeClass（“ui-btn-up-a ui-btn-down-a ui-btn-hover-a”） .addClass（ “UI-BTN-UP-B”） .attr（“data-theme”，“b”）;

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

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

1 个答案: