Пользовательские кнопки в JQuery Mobile - PullRequest
Новая
       4

Пользовательские кнопки в JQuery Mobile

0 голосов
/ 06 марта 2012

EDIT

Привет, У меня есть проект, в котором я хочу сделать мобильное веб-приложение с Jquery mobile. У меня проблема в том, что когда я делаю кнопку с пользовательским значком кнопки, я всегда получаю значок плюса. Моя пользовательская иконка - иконка PNG8

Это то, что я делаю в своем CSS 

.ui-icon-myapp-phone { 
    background-color:#FFFFFF;
    background-image: url(images/phoneIcon.png);
}

И я называю это так в моем html. 

<a href="index.html" data-role="button" data-icon="ui-icon-myapp-phone">Contacteer klant via telefoon</a>

Greetz

Ответы [ 2 ]

0 голосов
/ 06 марта 2012

OK.Я понимаю, что вы делаете неправильно:

Не помещайте весь класс значков в ваш обработчик значков данных!

НЕПРАВИЛЬНО 

<a href="index.html" data-icon="ui-icon-myapp-phone">...</a>

Это превращает ваш значок данных в ui-icon-ui-icon-myapp-phone

ПРАВИЛЬНО 

<a href="index.html"data-icon="myapp-phone">...n</a>

Чтобы изменитьцвет фона значка: 

/* all icons */ 
.ui-icon {
  background-color: #ffffff;
  }
/* one icon only */
.ui-icon-myapp-phone {
  background-color: #ffffff;
  }

Таким образом, ваш CSS должен работать, если вы исправили атрибут data-icon в своем HTML

0 голосов
/ 06 марта 2012

Вам придется перезаписать еще немного CSS.

Я делаю это так (используя свой собственный iconprite). Не стесняйтесь исправлять это в соответствии с вашими потребностями: 

/* lo-res */
.ui-icon, .ui-icon-searchfield:after {
    background: #666 /*{global-icon-color}*/;
    background: rgba(0,0,0,.4) /*{global-icon-disc}*/;
    /* your sprite URL or single icon URL */
    background-image: url(../images/icons/custom-icons-18-white.png) /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    }

/* hi-res */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 240dpi) {

   .ui-your-icon-1, .ui-your-icon-2,... {
            background-image: url(../images/icons/custom-icons-36-white.png);
            /* IE-handle hack, serve lo-res */
            #background-image: url(../images/icons/custom-icons-18-white.png);
            /* your lo-res icon size dimenstions! One icon 36x18px, 50 icons 1800x18... */
            -moz-background-size: 1800px 18px;
            -o-background-size: 1800px 18px;
            -webkit-background-size: 1800px 18px;
            background-size: 1800px 18px;
            }
   }

   /* your individual icon background position */
  .ui-your-icon-1   {background-position:       0px -50%;}
  .ui-your-icon-2   {background-position:     -36px -50%;}
  ...
...