CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
John Cooper
John Cooper

Reputation: 7641

Two questions on JQuery Mobile

Here is my header code. 

<div data-role="header" class="header">
    www.google.com  
</div><!-- /header -->
  1. How can i add two buttons, one to my left and right for my header.
  2. How to add link to "www.google.com".

When i try to add a link, it ignores the class property of div and brings a brown header instead of the image specified in my div.header css class.

<div data-role="header" class="header">
     <a href="http://www.google.com">www.google.com</a>     
</div><!-- /header -->

Below is the CSS class. 

div.header{
    background: url('../images/green-bg.png');
    margin-top:auto;
    height:auto;
    text-align:center;  
    width:auto;
}

Upvotes: 1

Views: 89

Answers (2)

Nagama Inamdar
Nagama Inamdar

Reputation: 2857

Write the required classes in jquery mobile .css file.

If it is not a minified version we can edit it for sure.

You can add your customised classes to it so that the theme won't affect the color scheme and styling.

Also you can give 'ui-btn-left' & 'ui-btn-right' classes to the hyperlinks.

Upvotes: 0

Jack
Jack

Reputation: 11003

To add the buttons you just add the markup for the left button, followed by a h tag then the markup for your second button and JQM should automatically position them to the right and left. To prevent JQM from enhancing your link and messing up your style you can add the data-role="none" attribute to it's parent h element.

For example

<div data-role="page">
<div data-role="header" class="header">
<a href="#" data-icon="back" data-role="button" >Button 1</a>
<h1><a href="http//www.google.com" rel="external" data-role="none">Google.com</a></h1>
<a href="#" data-icon="gear" data-role="button">Button 2</a>
</div>
<div data-role="content">
<p>Test</p>
</div>
</div>

Upvotes: 2

Related Questions