0

CSS スタイルと UI カスタム クラスを接続する方法があることは非常に興味深いです。たとえば、UIButton クラスを継承したクラスを作成し、それらに CSS スタイルを追加します。出来ますか？

私のcssを編集：

.button {
   border: 3px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 20px 40px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 9px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
}
.button:hover {
   border: 3px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
}
.button:active {
  text-shadow: #1e4158 0 1px 0;
  border: 3px solid #0a3c59;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
  color: #fff;
}

そして、私のクラスは UIButton クラスから継承され、他の変更はありません。css プロパティのみを追加したい。

4

1 に答える 1

0

それはうまくいくはずです。

<script>
jQuery(function(){
    // add your own class
    jQuery(".button").addClass("ui-button-new-css");

    jQuery(".button.ui-button-new-css").hover(function(){
        jQuery(this).addClass("ui-button-new-css-hover");
    }, function(){
        jQuery(this).removeClass("ui-button-new-css-hover");
    });

    jQuery(".button.ui-button-new-css").focus(function(){
        jQuery(this).addClass("ui-button-new-css-active");
    });

    jQuery(".button.ui-button-new-css").blur(function(){
        jQuery(this).removeClass("ui-button-new-css-active");
    });
});
</script>

<style>
    .button.ui-button-new-css { 
        /* your new css property */
    }
    .button.ui-button-new-css.ui-button-new-css-hover { 
        /* your new hover css property */
    }
    .button.ui-button-new-css.ui-button-new-css-active { 
        /* your new active css property */
    }
</style>
于 2012-08-27T10:12:59.420 に答える