如何在标题中获取仅图标的控件组？答案

【问题标题】：How to get an icon-only controlgroup inside the header?如何在标题中获取仅图标的控件组？
【发布时间】：2023-03-20 07:45:02
【问题描述】：

我在标题工具栏中需要多个微型按钮，但它们看起来应该更小，而且我无法在控件组中设置此仅图标按钮的样式，就像单个仅图标按钮一样，就像在 JQM Demos 中一样，它可以正常工作 - 相反 - 正如预期的那样。

我应该使用哪些 JQM 类来完成这项任务？我需要一个自定义的 wrapperClass 吗？

<!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.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-role="header" data-position="fixed">
      <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left">
        <button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-tag ui-btn-icon-notext">Button</button>
        <button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-user ui-btn-icon-notext">Button</button>
      </div>
      <h3>Page One</h3>
      <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
        <button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-tag ui-btn-icon-notext">Button</button>
        <button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-user ui-btn-icon-notext">Button</button>
      </div>
    </div>
    <div data-role="content">
    </div>
  </div>
</body>
</html>

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

将您的按钮更改为链接按钮（锚标记），它就可以正常工作。

<!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.min.js"></script>
  <style>
div.ui-mini .ui-btn {
  width: 26px;
}
  </style>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="header" data-position="fixed">
      <div class="ui-mini ui-btn-left">
        <a href="#" class="ui-btn ui-corner-all ui-icon-tag ui-btn-icon-notext">Icon only</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">Icon only</a>
      </div>
      <h3>Page One</h3>
      <div class="ui-mini ui-btn-right">
        <a href="#" class="ui-btn ui-corner-all ui-icon-tag ui-btn-icon-notext">Icon only</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">Icon only</a>
      </div>
    </div>
    <div data-role="content">
    </div>
  </div>
</body>

</html>

【讨论】：

伟大的ezanker，对不起，如果我的问题不够清楚，我需要它，就像一个按钮一样。 ui-corner-all 将所需的 border-radius:1em 应用于一个独立按钮，但我无法为 controlgroup 内的两个按钮获得相同的效果。
@deblocker，在这种情况下，不要使用控制组。将它们更改为常规 DIV。我已经用更改更新了我的答案
你给了我这个想法，因为我会动态地做 - 而不是造型，我会做 $("#page-one [data-role=header] [data-role=controlgroup]").controlgroup("destroy"); 和 .enhanceWithin() 来恢复角落。很多 THX