[英]How to add options to jQuery plugin
我正在为滑动侧导航栏开发一个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'
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.