在jquery mobile中为导航栏创建自定义图标时出现问题 [英] Issues while creating custom icon for navbar in jquery mobile
本文介绍了在jquery mobile中为导航栏创建自定义图标时出现问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想通过此链接为导航栏创建自定义图标时遇到的问题的解决方法
Thought I found a solution to the problem I had with creating custom icons for nav bar through this link
HTML
HTML
<div data-role="page">
<div data-role="content">
<div data-role="footer" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="#" id="favorite" data-icon="custom">Favorite</a></li>
<li><a href="#" id="recent" data-icon="custom">Recent</a></li>
<li><a href="#" id="contacts" data-icon="custom">Contacts</a></li>
<li><a href="#" id="keypad" data-icon="custom">Keypad</a></li>
<li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li>
</ul>
</div>
</div>
</div>
</div>
演示: http://jsfiddle.net/vh4Ca/62/
但是我仍然有问题.
我无法将border radius
设置为none
,并且图标的背景较暗.
But Im still having problems with it.
Im not able to set the border radius
to none
and the icons have a dark background.
推荐答案
Glyphish图标的颜色从设计师
更新主题可以使您获得更多控制权
Updating the themes gives you a little more control
按钮选项是我的帮助
已应用主题的HTML
HTML with themes applied
<div data-role="page">
<div data-role="content">
<!-- Adding theme b -->
<div data-role="footer" class="nav-glyphish-example" data-theme="b">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li>
<!-- Adding theme a -->
<a href="#" id="favorite" data-icon="custom" data-theme="a">Favorite</a></li>
<li><a href="#" id="recent" data-icon="custom">Recent</a></li>
<li><a href="#" id="contacts" data-icon="custom">Contacts</a></li>
<li><a href="#" id="keypad" data-icon="custom">Keypad</a></li>
<li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS用于放置图标
.nav-glyphish-example .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav-glyphish-example .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;
}
#favorite .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -345px -112px;
background-repeat: no-repeat;
}
#recent .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -9px -61px;
background-repeat: no-repeat;
}
#contacts .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -9px -540px;
background-repeat: no-repeat;
}
#keypad .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -9px -783px;
background-repeat: no-repeat;
}
#voicemail .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -394px -733px;
background-repeat: no-repeat;
}
这篇关于在jquery mobile中为导航栏创建自定义图标时出现问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文