jquery mobile中的自定义按钮
编辑 嗨, 我有一个项目,我想用Jquery mobile制作一个移动web应用程序。 我的问题是,当我制作一个带有自定义按钮图标的按钮时,我总是得到加号图标。我的自定义图标是PNG8图标 这就是我在CSS中所做的jquery mobile中的自定义按钮,jquery,html,css,jquery-mobile,Jquery,Html,Css,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"
.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您将不得不覆盖更多的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%;}
...
嗯。我知道你做错了什么: 不要将整个图标类放在数据图标处理程序中 错
因此,如果您在HTML中更正了数据图标属性,您的CSS应该可以正常工作。你面临什么问题?您的代码中确实有一个bug。将CSS文件路径中的\更改为a/。我尝试过,但保持不变。我也编辑了我的问题,还是错的。你应该编辑CSS,这样你就可以使用/了,这样其他人就不会关注打字错误,而是关注于解决你遇到的任何问题。你的问题也没有多大意义。我鼓励你编辑这篇文章,准确地描述什么是a不起作用的,什么是b预期的结果。显示更多代码也会有所帮助,因为jQueryUI有很多依赖项。例如,class=ui图标为myapp phone的HTML元素在哪里?您正在向我们显示问题中未列出HTML的CSS。我再次编辑了我的问题。希望现在好多了。好吧,但我不希望图标出现在灰色的圆圈里。这也可能吗?
<a href="index.html" data-icon="ui-icon-myapp-phone">...</a>
<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;
}