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

自定义图标
要使用自定义图标，请指定具有myapp-email等唯一名称的数据图标值，按钮插件将   通过在数据图标值和前缀ui-icon-生成一个类   将其应用于按钮：ui-icon-myapp-email。

然后，您可以在样式表中编写一个CSS规则来定位   ui-icon-myapp-email类用于指定图标背景源。至   与其余图标保持视觉一致性，创建白色   图标18x18像素 保存为具有Alpha透明度的PNG-8 。

在这个例子中，我们只是指向一个独立的图标图像，但是   您可以轻松使用图标精灵并指定   相反，定位，就像我们在中使用的图标精灵   框架。
.ui-icon-myapp-email {
  background-image: url("app-icon-email.png");
}
这将创建标准分辨率图标，但现在有很多设备有很高分辨率的显示器，就像上面的视网膜显示器一样 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。然后你应该能够主题以及点击效果。

例如，我发现了一个易趣透明图像（两个按钮使用相同的图像）：

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

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

1 个答案: