Question

我正在为滑动侧导航栏开发jQuery插件。到目前为止，我已经成功配置了此插件以接受回调。但是，我希望此插件中的CSS属性也可以在script标记的对象文字中访问。例如，我要选择覆盖默认的背景色。当前，在选项文字中添加背景颜色等属性不会覆盖默认值。如何配置此插件，以便同时拥有回调和对象选项？见下文。谢谢！

<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">&#9776; 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'>&times;</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;}
}

Answer 1

我建议您允许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'
    }
});

如何向jQuery插件添加选项

1 个答案: