jquery 移动 - 删除 header 中的图标光盘

Question

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

中的图标中删除光盘

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

Answer 1

解决方案：

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

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

Answer 2

.ui-nodisc-icon class 用于图标 background，而不是按钮本身。

这里是参考 Icons - jQuery Mobile Demos :

The semi-transparent dark circle behind the icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system.

如果您需要全平面设计，您可以使用.ui-noboxshadow class (请参阅下面我的解释） 并将按钮的边框和背景声明为透明。如果您需要为所有 .ui-nodisc-icon 按钮执行此操作，请从 css.

中删除 .ui-header 选择器

.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，您的按钮在里面就足够了带有 class .ui-noboxshadow 的容器。例如，您可以将 class 添加到 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>

jquery 移动 - 删除 header 中的图标光盘

jquery mobile - remove icon disc in the header

jquery-mobile