jquery mobile - 删除标题中的图标光盘

问题描述 投票:0回答:2

我使用jqm 1.4.5创建一个应用程序,但我有一个关于图标的问题。我使用class = ui-nodisc-icon从图标中删除了所有光盘但是当我到达标题图标时光盘没有出来。有人能够从标题中的图标中删除光盘吗?

打印https://i.postimg.cc/v81SLPZx/2019-02-26-00-10-54.png

jquery-mobile
2个回答
0
投票

解:

  <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/

如果是这样,请不要忘记接受答案。


0
投票

.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>

为了澄清我的答案,请注意:您不需要在标记中添加额外的div,只需将按钮放在容量为.ui-noboxshadow的容器中即可。例如,您可以将类添加到header。所以,这将实现相同的结果:

<div data-role="header" 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>
  <h1>Header</h1>
</div>
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.