jQuery 移动按钮 - 单击时突出显示

Question

我在一个带有 PayPal 按钮的移动网站上有一个订单。 PayPal 按钮是一个带有 input=image 按钮的表单。

我不得不使用 data-role='none' 来删除 jQuery Mobile 的样式，因为它拉伸了按钮并破坏了它的设计。但是现在 - 我没有向用户输入按钮已提交的任何信息。

如何在不改变其固有设计的情况下为按钮添加高亮显示？

谢谢！

P.S - 按钮代码如下：

<input type="image" src="<button url>" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" data-role="none">

Answer 1

我会建议你按照 jQM 自定义图像建议来达到你想要的结果，但不是 100%，因为大小会有所不同。

• http://jquerymobile.com/test/docs/buttons/buttons-icons.html

自定义图标
要使用自定义图标，请指定一个具有唯一名称的 data-icon 值，例如 myapp-email，按钮插件将 通过将 ui-icon- 添加到 data-icon 值和 将其应用于按钮：ui-icon-myapp-email。

然后，您可以在样式表中编写针对 ui-icon-myapp-email 类指定图标背景源。到 保持与其余图标的视觉一致性，创建白色 图标 18x18 像素保存为具有 alpha 透明度的 PNG-8。

在这个例子中，我们只是指向一个独立的图标图像，但是 您可以轻松地使用图标精灵并指定 而是定位，就像我们在 框架。

.ui-icon-myapp-email {
  background-image: url("app-icon-email.png");
}

这将创建标准分辨率图标，但现在很多设备 具有非常高分辨率的显示器，例如 Retina 显示器 iPhone 4. 要添加高清图标，请创建一个 36x36 像素的图标 （正好是 18 像素大小的两倍），并添加使用 -webkit-min-device-pixel-ratio: 2 媒体查询仅针对规则 到高分辨率显示器。指定 HD 的背景图像 图标文件并将背景大小设置为适合的 18x18 像素 将 36 像素图标放入相同的 18 像素空间。媒体查询块 可以包装多个图标规则：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-icon-myapp-email {
      background-image: url("app-icon-email-highres.png");
      background-size: 18px 18px;
  }
  ...more HD icon rules go here...
}

重要的部分是将图像保存为具有 alpha 透明度的 PNG-8。然后，您应该可以设置主题并提供点击效果。

例如，我刚刚找到了一张 eBay 透明图片（两个按钮使用相同的图片）：

• http://jsfiddle.net/Eg4DW/1/

JS

$('#buttonColor').mousedown(function() {
    $(this).toggleClass('ui-btn-up-e').toggleClass('ui-btn-down-e');
});

$('#buttonColor').mouseup(function() {
    $(this).toggleClass('ui-btn-up-e').toggleClass('ui-btn-down-e');
});

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <button data-role="none" type="button">
            <img src="http://www.virtuescience.com/images/statusicon/ebay/forum_old-48.png" alt="eBay button"/>
        </button>
        <br />
        <button data-role="none" type="button" class="ui-btn-up-e" id="buttonColor">
            <img src="http://www.virtuescience.com/images/statusicon/ebay/forum_old-48.png" alt="eBay button"/>
        </button>
    </div>
</div>​

第一个按钮是正常的，第二个我用鼠标向下/向上应用了 jQM 主题

相关：

• https://superuser.com/questions/284931/is-there-any-way-to-save-a-png-8-file-with-alpha-transparency-in-photoshop