jquery mobile - 删除标题中的图标光盘
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery mobile - 删除标题中的图标光盘相关的知识，希望对你有一定的参考价值。
我使用jqm 1.4.5创建一个应用程序，但我有一个关于图标的问题。我使用class = ui-nodisc-icon从图标中删除了所有光盘但是当我到达标题图标时光盘没有出来。有人能够从标题中的图标中删除光盘吗？
答案
解：
<div data-role="header">
<div id="custom-border-radius">
<a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon">No text</a>
</div>
</div>
还有一些CSS：
#custom-border-radius .ui-btn-icon-notext.ui-corner-all {
border: 0 solid transparent;
background-color: transparent;
}
工作示例：http://jsfiddle.net/kv1jayLe/
如果是这样，请不要忘记接受答案。
另一答案
.ui-nodisc-icon类用于图标background，而不是按钮本身。
这是参考Icons - jQuery Mobile Demos：
图标后面的半透明黑圈确保了任何背景颜色的良好对比度，因此它与jQuery Mobile主题系统配合得很好。
如果您需要全平面设计，可以使用.ui-noboxshadow类将按钮包装在容器内（请参阅下面的说明），并将按钮的边框和背景声明为透明。如果您需要为所有.ui-nodisc-icon按钮执行此操作，请从.ui-header中取出css选择器。
.ui-header .ui-alt-icon.ui-nodisc-icon.ui-btn.ui-btn-icon-notext {
background-color: transparent;
border-color: transparent;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<div class="ui-noboxshadow">
<a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-btn-icon-notext ui-icon-bars ui-nodisc-icon">Menu</a>
</div>
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
Shadow, disc: <a href="#" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
Shadow, no-disc: <a href="#" class="ui-btn ui-btn-corner-all ui-shadow ui-nodisc-icon ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
No-shadow, no-disc: <a href="#" class="ui-btn ui-btn-corner-all ui-nodisc-icon ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
</div>
</div>
</body>
</html>以上是关于jquery mobile - 删除标题中的图标光盘的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Jquery Mobile 中删除基本链接中的阴影？