CODEWITHSUNDEEP
cssimagebuttonjquery-mobile
Sahil Grover
Sahil Grover

Reputation: 1915

How to use an image as a button in jQuery Mobile?

I went through a search about how default buttons in jQuery Mobile can be replaced by custom images, as I am implementing code to build a PhoneGap app. I found this one useful link.

I have code like this: 

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>

And the CSS is:

.ui-icon-myapp-settings {
  background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Still it shows a + icon and not my icon.

css directory -- ../css/style.css
image directory  ../css/images/settings.png

And I get a view like:

What's wrong with the code or Image location?

Upvotes: 4

Views: 37330

Answers (6)

Harrish Selvarajah
Harrish Selvarajah

Reputation: 1873

<a id='btnShowSignUp' href="#" data-shadow="false" data-theme="none"
                                    onclick="ShowSignUp();">
<img src="../assets/downArrow.png" style="height: 15px;">
</a>

Start off with anchor tag and add the href on click call method. Then add the img tag.

Upvotes: 2

user2509987
user2509987

Reputation: 31

Try this:

<a data-role="button" href="#" data-shadow="false" data-theme="none">
  <img src="images/imagefile.png" border="0"/>
</a>

set the "data-theme" to "none" on your button and add "data-shadow="false".

Upvotes: 3

DWolf
DWolf

Reputation: 725

Change your 

 data-icon="myapp-custom"

to

 data-icon="myapp-settings"

if the css is ui-icon-myapp-settings

Upvotes: 0

user647458
user647458

Reputation:

If you need something bigger than the icon, in order to use an image, as a button, just use the following:

<a href="venta.html" data-theme="" id="ventaOption"> <img src="css/images/standard/shoppingcart.png" width="26" height="26"> <br/> Ventas </a>

Upvotes: 12

Phill Pafford
Phill Pafford

Reputation: 85298

EDIT:

After looking at some of your comments I like you wanted a custom button image. Would something like this work?

I would look into a custom header or navbar, here are the docs:

Original Answer Below:

You need to prepend ui-icon- to you data-icon attribute value, which in you example is myapp-custom

So your CSS class should be this:

.ui-icon-myapp-custom {
    background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

HTML

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
Custom Icon
</a>

jQM Docs:

Custom Icons
To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

Example: (Doesn't look nice but has the custom icon)

Upvotes: 1

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

.ui-icon-myapp-settings {
    background: url("images/settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Try this out.

Custom Icons

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

Upvotes: 1

Related Questions