[英]Custom buttons in jquery mobile
編輯
嗨,我有一個項目,我想用Jquery mobile制作一個移動Web應用程序。 我的問題是,當我制作帶有自定義按鈕圖標的按鈕時,總是得到加號圖標。 我的自定義圖標是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>
格里茨
您將不得不覆蓋更多的CSS。
我正在這樣做(使用我自己的iconsprite)。 隨時根據您的需求進行修補:
/* 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%;}
...
好。 我知道您在做什么錯:
不要將整個圖標類放在數據圖標處理程序中!
錯誤
<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;
}
因此,如果您更正了HTML中的data-icon屬性,則CSS應該可以工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.