使用带有 Notify.js jQuery 插件的外部自定义 CSS答案

【问题标题】：Using external custom CSS with Notify.js jQuery plugin使用带有 Notify.js jQuery 插件的外部自定义 CSS
【发布时间】：2014-05-28 09:26:45
【问题描述】：

我刚刚开始学习 jQuery 和 CSS，并且对使用特定 jQuery 插件 Notify.js 生成的 toasts/notifications 样式有疑问。

插件网站上有文档，但我无法正确理解如何限制我的 JS 文件中有关样式的代码数量，而是将其保存在我的外部 CSS 文件中。看来您应该能够为您的 CSS 类使用正确的命名约定，然后以一些简单的方式进行操作。

所以不是

$.notify.addStyle('check', {
    html : "<div><span data-notify-text/></div>",
    classes : {
        base : {
        "white-space" : "nowrap",
        "background-color" : "#cccccc",
        "padding" : "5px",
        "font-family" : "Comic Sans MS"
        },
        uncheck : {
            "color" : "white",
            "background-color" : "#252525"
        }
    }
});

我想在我的外部 CSS 文件中使用类似的东西

.notifyjs-check-base { 
white-space: nowrap; 
background-color: #D3D3D3;/*lightgray*/ 
padding: 5px; 
font-family: Comic Sans MS;  }

.notifyjs-check-uncheck{
color: white,
background-color: #252525;}

然后有类似的东西

$.notify.addStyle('check');

在我的 js 文件中使用通知样式。

所有这些都在 Chrome 扩展程序中用于向用户显示消息。

你会怎么做？做今天的好事，帮助初学者:)

【问题讨论】：

标签： javascript jquery css jquery-plugins styling

【解决方案1】：

如果我正确理解了您的问题，我猜您想将您的 javascript 和 css 代码分开。然后你可以在你的 javascript 文件中写到这个。

 $.notify.addStyle('foo', {
    html:
      "<div>" +
        "<div class='clearfix'>" +
          "<div class='title' data-notify-html='title'/>" +
          "<div class='buttons'>" +
            "<button class='no'>Cancel</button>" +
            "<button class='yes' data-notify-text='button'></button>" +
          "</div>" +
        "</div>" +
      "</div>"
});

以及外部 css 文件中的其余 css 类

.notifyjs-foo-base {
 opacity: 1;
 width: 200px;
 background-color: #DFF0D8;
 color:#468847;
 border-color:#D6E9C6;
  padding: 5px;
  border-radius: 10px;
  font-weight:bold;
}

.notifyjs-foo-base .title {
  width: 100px;
  float: left;
  margin: 10px 0 0 10px;
  text-align: right;
}

.notifyjs-foo-base .buttons {
  width: 70px;
  float: right;
  font-size: 9px;
  padding: 5px;
  margin: 2px;
}

.notifyjs-foo-base button {
  font-size: 9px;
  padding: 5px;
  margin: 2px;
  width: 60px;
}

【讨论】：