CODEWITHSUNDEEP
jquery-mobile
Adam Bell
Adam Bell

Reputation: 1045

JQuery Mobile: data-icon replacing ui-listview and other navbar icons

I'm a bit of a JQuery Mobile Noob and I've been trying to search for an answer to this, but to no avail. I've created a ui-navbar with five custom data icons. Problem is when I select one of the five links, the buttons to the left of the selected link take on the selected icon. Also, what should be the right arrow on the ul-listview element, also takes on the selected icon albeit it's hard to see. Had to use Firebug to expand that in order to see if's the selected data-icon.

Here's the code I'm using for the navbar in my footer:

<div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="#more" id="more" data-icon="custom">More</a></li>
        </ul>
        </div> 
</div>

And some of the CSS:

.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}

Any idea why this might be happening? It has to be something with my styles I would think.

Upvotes: 0

Views: 3829

Answers (1)

Taifun
Taifun

Reputation: 6293

don't use the name ui-icon only, instead use ui-icon-something, see also the docu about custom icons

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: ui-icon-myapp-email.

You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

example

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>

 <style>
  .ui-icon-taifun {
    background-image: url("taifun.png");
  }

  .nav .ui-btn .ui-btn-inner {
    padding-top: 40px !important;
  }

  .nav .ui-btn .ui-icon-taifun {
    width: 45px!important;
    height: 35px!important;
    margin-left: -24px !important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -webkit-border-radius: none !important;
    border-radius: none !important;
  }

  #programas .ui-icon-taifun {
    background-image: url(taifun.png);
    background-position: 0 0;
    background-repeat: no-repeat;
  }
 </style>

 <title>Test</title>
</head>

<body>
  <div data-role="page">
    <div data-role="content">
      <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
        <h2><img src="favicon.ico"> Pets</h2>
        <ul data-role="listview">
          <li><a href="index.html">Canary</a></li>
          <li><a href="index.html">Cat</a></li>
          <li><a href="index.html">Dog</a></li>
        </ul>
       </div><!-- /collapsible -->
       <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
         <h2><img src="favicon.ico"> Farm animals</h2>
         <ul data-role="listview">
           <li><a href="index.html">Chicken</a></li>
           <li><a href="index.html">Cow</a></li>
           <li><a href="index.html">Duck</a></li>
         </ul>
      </div><!-- /collapsible -->
    </div>

  <div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="#more" id="more" data-icon="custom">More</a></li>
        </ul>
    </div>
  </div>

  </div>

</body>
</html>

screenshot
screenshot

Upvotes: 1

Related Questions