1

私は sencha touch を使用してモバイル Web アプリに取り組んでいます。次のコードを使用してボタンを作成しました

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

そして App.scss に、このボタンの背景を画像に変更する次の 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 Priority Order

また、常に Web Inspector または Firebug を使用して、CSS が適切な要素に適用されているかどうか、別の CSS クラスによってオーバーライドされていないかどうかを確認してください。

于 2013-03-12T07:20:30.180 に答える
-1

ボタンにタップイベント リスナーを追加し、ボタンの押されたクラスを変更します。

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

}
于 2013-03-12T06:04:16.220 に答える