How to add home/ settings buttons to PhoneGap (webview)

Example here:

Replies(5)

Re: How to add home/ settings buttons to PhoneGap (webview)

5 months ago

Not quite sure what your question is. How to remove the default button styling, and only use an icon?

Add data-role="none" to the <a> tag. Apply a class to the <a> tag and then write some CSS for the icon.

Something like:

.backBtn {
width: 30px;
height: 30px;
background-color: transparent;
background-position: top left;
background-repeat: no-repeat;
background-size: 100% auto;
background-image: url(images/backbtn.png);
}

revilo22

Re: How to add home/ settings buttons to PhoneGap (webview)

5 months ago

watusiware,

Thanks a lot for your example, but I've solved it, there was need only to add an class name which is provided by .css file

revilo22

Re: How to add home/ settings buttons to PhoneGap (webview)

4 months ago

@watusiware,

Just wanted to ask you. I want to use your example in this situation: on mouseover to picture it's changes. Here is my modification but it's not working. Could you check it please? I'm new in CSS and maybe have syntax error. Thanks in advance

.infoBtn {
width: 2.0em;
height: 2.0em;
background-color: transparent;
background-position: top right;
background-repeat: no-repeat;
background-size: 100% auto;
background-image: url(images/ic_about.png);
onmouseover: url(images/ic_about2.png); /* it's not working */
}

watusiware

Re: How to add home/ settings buttons to PhoneGap (webview)

4 months ago

Yes, it's basic CSS. What you have above is invalid. There is no :onmouseover pseudo-selector in CSS, and you don't use pseudo-selector's that way. I think you want :hover.

Add a second rule:

.infoBtn:hover {
background-image: url(images/ic_about2.png);
}

I'd suggest a good book or tutorial on CSS that includes good coverage of CSS3. It's an extremely important skill to learn if you are using jQuery Mobile.

Response title

Attachments

jQuery Forum