我正在为滑动侧导航栏开发一个jQuery插件。到目前为止，我已成功配置此插件以接受回调。但是，我希望此插件中的CSS属性也可以在脚本标记中的对象文字中访问。例如，我想要覆盖默认的背景颜色。目前，向选项文字添加背景颜色等属性不会覆盖默认值。如何配置此插件以便我可以同时拥有回调和对象选项？见下文。谢谢！
<body id="main">
<div id="mySidenav" class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<a style="font-size:30px;cursor:pointer" id="openNav">☰ open</a>
<script src="sideSlide.js"></script>
<script>
$("#mySidenav").sideSlide({
sidePush: true,
css: {
'backgroundColor': 'green'
}
});
</script>
$("#mySidenav").append(
"<a href='javascript:void(0)' class='closebtn' id='closeNav'>×</a>"
);
(function ( $ ) {
$.fn.sideSlide = function( options ) {
var defaults = {
sidePush: "",
css: {
'height': "100%",
'width': 0,
'position': "fixed",
'zIndex': 1,
'top': 0,
'left': 0,
'marginLeft': 0,
'backgroundColor': "#111",
'opacity': "",
'overflowX': "hidden",
'transition': "0.5s",
'paddingTop': 60
}
},
options = $.extend({}, defaults, options);
$("#mySidenav").css(options.css);
var $this = $("#mySidenav");
$this.css({
'height': "100%",
'width': 0,
'position': "fixed",
'zIndex': 1,
'top': 0,
'left': 0,
'marginLeft': 0,
'backgroundColor': "#111",
'opacity': "",
'overflowX': "hidden",
'transition': "0.5s",
'paddingTop': 60
});
if(options.sidePush === true) {
$("#openNav").click(function(){
$("#mySidenav").css("width", "250px" );
$("#main").css("margin-left", "250px" );
});
$("#closeNav").click(function(){
$("#mySidenav").css("width", "0px" );
$("#main").css("margin-left", "0px" );
});
};
if(options.sidePush === "") {
$("#openNav").click(function(){
$("#mySidenav").css("width", "250px" );
$("#main").css("margin-left", "0px" );
});
$("#closeNav").click(function(){
$("#mySidenav").css("width", "0px" );
$("#main").css("margin-left", "0px" );
});
};
$this.css(options.css);
};
}( jQuery ));
body {
font-family: "Lato", sans-serif;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
我建议您允许使用cssClass选项，然后让开发人员在样式表中应用样式
例如：
var defaults = {
sidePush: "",
cssClass: "default-class"
};
options = $.extend({}, defaults, options);
var $this = $("#mySidenav");
...
$this.addClass(options.cssClass);
// usage:
$("#mySidenav").sideSlide({
sidePush: true,
backgroundColor: "blue",
cssClass: "some-class"
});
但是如果您更喜欢传递css样式（将内联应用），那么可能会添加一个接受整个css对象的选项？像这样：
var defaults = {
sidePush: "",
css: {
'height': "100%",
'width': 0
}
};
options = $.extend({}, defaults, options);
var $this = $("#mySidenav");
...
$this.css(options.css);
// usage
$("#mySidenav").sideSlide({
sidePush: true,
backgroundColor: "blue",
css: {
'height': "50%",
'width': '10px'
}
});