javascript - Dojo JS ToggleButton 显示为已启用但不允许单击/切换和悬停轮廓

Question

我需要使用 ToggleButton 来显示图像和一些文本，我希望按钮显示为已启用(彩色图标和黑色文本)，但我不想让点击/切换立即发生，因为此功能将晚一点来。我再次需要彩色图标和黑色文本，但按钮不可点击(基本上看起来不像按钮，悬停时没有轮廓等)。

this.button = new ToggleButton({
                         "id": title,
                         "label": count,
                         "showLabel": true,
                         "iconClass": "eIcon",
                         "class": "buttonText",
                         "disabled": true,
                 });

我无法让 CSS 正常工作 - 我尝试将按钮的颜色放在 CSS 中，如下所示:

.itpButtonText { color: black !important; }

但它永远不会被拾起。也许我需要做相反的事情，允许它被启用，但不允许悬停或被点击？

有人有什么建议吗？

Answer 1

首先，您是否有任何特殊原因需要使用 ToggleButton 来实现它？实际上，很容易使用两个 div(一个用于 img 类，另一个用于文本)来实现您想要达到的相同效果，您只需要保留一个状态并根据该状态设置相应的样式即可。

如果您仍然需要使用 toggleButton，您可以尝试为您的特定按钮覆盖 ToggleButton 的一些默认样式。使用检查器获取您需要更改的相应类名，在您的主题 css 文件中搜索它们，然后在您自己的 css 文件中覆盖它们。

例如，要覆盖悬停行为，您可能需要覆盖

.claro .dijitToggleButtonHover .dijitButtonNode {
  background-color: #86bdf2;
  color: #000000;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

与

.yourClass .claro  .dijitToggleButtonHover .dijitButtonNode {
   /* your styles */

}

但是你可能需要做很多这样的覆盖，所以也许最好使用第一种方法创建一个自定义按钮。