1

Jquery Mobile 1.2 でカスタム ボタンを作成しようとしています。私のボタンは表示されますが、既存のカスタムの丸みを帯びたデフォルト ボタンが表示されます。このように表示するボタンが必要です。 http://i.imgur.com/RFeeQ.png

http://i.imgur.com/MaQ2h.png

#homepage .my-button {
background-image: url('../images/icons/btn_panel.png') !important;
width:307px;
height:50px;
padding-top:0px auto;
}

#homepage  .ui-icon-about-icon {
border-radius:0px;
background-image: url('../images/icons/about_up.png');
background-color: rgba(0, 0, 0, 0);
width:36px;
height: 36px;
}

<div data-role="content" class="content">   
     <a href="about.html" data-transition="fade" data-role="button" data-icon="about-icon" data-iconshadow="false" class="my-button">About</a>
</div>
4

2 に答える 2

1

それは良いスタートでした。CSS の操作を続けてください...パディングのために高さを調整しましたが、自由にフィードして自由に遊んでください...

 <style>
  #homepage .my-button {
    background-image: url("btn_panel.png");
    width:307px;
    height:75px;
    padding-top:0px auto;
  }

  #homepage .my-button .ui-btn-inner {
    padding-top: 25px;
  }

  #homepage .my-button .ui-btn-text {
    left: -80px;
  }

  .ui-icon-about-icon {
    border-radius:0px;
    background-image: url("logo36.png");
    background-color: rgba(0, 0, 0, 0);
    width:36px;
    height:36px;
  }
 </style>

丸みを帯びた角を削除するには、次を使用しますdata-corners="false"。

  <a href="about.html" data-transition="fade" data-role="button" data-icon="about-icon" data-iconshadow="false" data-corners="false" class="my-button">About</a>

少し遊んで、この結果になりました（画像はありませんが、別の画像を使用しました...） スクリーンショット

また、テーマ ローラーを使用して CSS をカスタマイズすることもできます...

于 2012-11-06T19:48:44.567 に答える
0

ボタンのドキュメントを参照します。

実際の例:

JS:

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

これがあなたが探しているものだと思います

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>

関連している：

于 2012-11-08T04:04:56.043 に答える