编辑
你好, 我有一个元素,我想用 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>
问候
最佳答案
您将不得不覆盖更多的 CSS。
我是这样做的(使用我自己的图标 Sprite )。随意根据您的需要对其进行修补:
/* 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%;}
...
关于jquery - jQuery Mobile 中的自定义按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9579890/