jQuery移动按钮按下行为

Question

我有一个带jQuery mobile的链接按钮。 我希望能够将其设置为持续按下或未按下。 我尝试了这个代码：

$(this).css('background-color', '#e0e0e0');

和未压缩的代码：

$(this).css('background-color', '#f6f6f6');

但是当悬停在未按下的按钮上时，它不再突出显示。 所以我试过了：

$(this).addClass('ui-button-active');

但按钮呈蓝色，我想要深灰色。 有什么建议吗？

Answer 1

你去过themeroller吗？在那里你可以尝试不同的风格。

添加自定义主题

自定义jQuery Mobile按钮的另一个好方法是添加自定义主题。

<a data-role="button" data-theme="my-site">Button</a>

这将使您可以更好地控制按钮的不同元素和状态。例如，您可以通过编写与自定义主题名称关联的类的代码来定位CSS中按钮的不同状态（它们会自动添加到按钮中）：

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

请记住，默认按钮是由边框，阴影和背景渐变组成的。除此之外，按钮内还有其他HTML元素，由框架自动生成。根据您想要自定义的内容，您可能需要定位按钮中的其他类（即ui-icon，ui-btn-text，ui-btn-inner等）。

否则我可以推荐你这个网站

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

Answer 2

在jQuery Mobile 1.4.2 CSS中，您可以看到正常/悬停/活动状态（针对每个主题）的按钮样式，以及用于更改按钮颜色的活动样式（至蓝色，在你的情况下）。

模拟＆＃34;持续按下＆＃34;按钮，您必须根据按钮a类为每个主题（b和:active）添加一个类，并覆盖背景颜色：

.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }

然后，在您的脚本中，您可以切换＆＃34;按下＆＃34;陈述：

$("#button").toggleClass('button-pressed-a');