Question

我正在使用jqm 1.4.5创建应用程序，但是我对图标有疑问。我使用 class = ui-nodisc-icon 从图标中删除了所有光盘，但是当我到达标题图标时，光盘没有弹出。有人能够从标题中的图标中删除光盘吗？

打印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类用于图标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>

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

2 个答案: