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

Question

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

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

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

谢谢!

PS - 按钮代码如下:

<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电子邮件.

然后,您可以在样式表中编写一个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主题

有关:

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