Javascript 通过Notify.js jQuery插件使用外部自定义CSS
我刚刚开始学习jQuery和CSS,对于使用特定jQuery插件生成的祝酒词/通知的样式,我有一个问题 插件网站上有文档,但我无法正确理解如何限制JS文件中有关样式的代码量,而是将其保存在外部CSS文件中。看起来您应该能够为您的CSS类使用正确的命名约定,然后以某种简单的方式进行操作 所以不是Javascript 通过Notify.js jQuery插件使用外部自定义CSS,javascript,jquery,css,jquery-plugins,styling,Javascript,Jquery,Css,Jquery Plugins,Styling,我刚刚开始学习jQuery和CSS,对于使用特定jQuery插件生成的祝酒词/通知的样式,我有一个问题 插件网站上有文档,但我无法正确理解如何限制JS文件中有关样式的代码量,而是将其保存在外部CSS文件中。看起来您应该能够为您的CSS类使用正确的命名约定,然后以某种简单的方式进行操作 所以不是 $.notify.addStyle('check', { html : "<div><span data-notify-text/></div>", c
$.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"
}
}
});
然后吃点类似的东西
$.notify.addStyle('check');
在我的js文件中,在我的通知中使用样式
所有这些都在Chrome扩展中用于向用户显示消息
你会怎么做?做今天的好事,帮助初学者:)如果我正确理解了你的问题,我想你应该将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>"
});
$.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>"
});
.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;
}