1

我正在使用 sencha touch 开发移动网络应用程序。我使用以下代码创建了一个按钮

 {
            xtype: 'button',
            cls: 'messagesBtn'
}

在 App.scss 中，我添加了以下 css，该 css 将此按钮的背景更改为图像

.messagesBtn {
  height: 50%;
  background: url(../images/home.png) no-repeat;
}

现在这个 css 可以工作，但是当我按下那个按钮时，它不会删除该图像并向它添加另一个我不想要的状态。我希望当用户按下此按钮时，应将其他图像替换为当前图像。我怎样才能做到这一点？

更新

我改变了我的代码并添加了pressedCls

{
            xtype: 'button',
            cls: 'messagesBtn',
            pressedCls: 'x-button-pressed'
}

这是CSS

 .messagesBtn {
  background: url(../images/home.png) no-repeat;
 } 

 .x-button-pressed {
    background: url(../images/appointments.png) no-repeat;  
 }

以上也不起作用。

4

4 回答 4

5

无需更改按钮的代码，您就可以使用以下 CSS：

.messagesBtn {
     // Your CSS for the normal state
 } 

 .messagesBtn.x-button-pressing {
     // Your CSS for the pressing state
 }

这里的例子

更新

相关阅读：CSS优先顺序

此外，始终使用 Web Inspector 或 Firebug 来检查您的 CSS 是否应用于正确的元素，以及它是否没有被另一个 CSS 类覆盖

于 2013-03-12T07:20:30.180 回答
3

您可以使用按钮的pressedCls配置，即the css class to add to the button when it is pressed：

pressedCls: 'x-button-pressed'

然后您可以使用该 css 类应用任何 css 样式：

.x-button-pressed {
    background: url(image-pressed.png) no-repeat;
}
于 2013-03-12T06:02:01.333 回答
0

首先ID在您的按钮属性中分配一个，然后在该特定分配tap event的 ID 上替换。您应该为模式class创建另一个类。pressed希望它有效..

于 2013-03-12T06:01:32.480 回答
-1

将点击事件侦听器添加到按钮，然后更改按钮的按下类。

{
    xtype: 'button',
    cls: 'messagesBtn',
    listeners: {
        'tap' : function () {
              ...   
        }
    }

}
于 2013-03-12T06:04:16.220 回答