CODEWITHSUNDEEP
jquery-mobile
user1205312
user1205312

Reputation: 13

jquery mobile custom buttons

I am trying to create a custom button with Jquery Mobile 1.2. My button displays but with the existing custom rounded default button. I need button to display like this. https://i.sstatic.net/vU0J8.png

https://i.sstatic.net/NHgVp.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>

Upvotes: 1

Views: 6531

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85298

I would look at the docs for buttons:

Live Example:

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%');

I think this is what you're looking for

// 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>

Related:

Upvotes: 0

Taifun
Taifun

Reputation: 6293

that was a good start, just continue manipulating the CSS... I adjusted the height because of the padding, but feed free to play around yourself...

 <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>

to remove the rounded corners just use 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>

I played a little bit around and came to this result (I do not have your images, but used another one...) screenshot

you also can use the theme roller to customize your CSS...

Upvotes: 1

Related Questions