javascript - including "-" in $.extend from jquery -
i trying create simple jquery plugin. problem when change name of settings's properties backgroundcolor1 background-color1 or include "-" in property name, compiler not allow me it.
why that?
(function ( $ ) { $.fn.greenify = function( options ) { // easiest way have default options. var settings = $.extend({ // these defaults. color: "#556b2f", backgroundcolor1: "white" }, options ); // greenify collection based on settings variable. return this.css({ "color": settings.color, "background-color": settings.backgroundcolor1 }); }; }( jquery )); $(document).ready(function () { $("h2").greenify({ color:"red",backgroundcolor1:"yellow"}); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2> test</h2> i have added code, can try using background-color1 in place of backgroundcolor1, , see compiler not allowing this.
you can use quoted object keys:
$.fn.greenify = function (options) { var settings = $.extend({ "color": "#556b2f", "background-color": "white" }, options); return this.css({ "color": settings["color"], "background-color": settings["background-color"] }); } $("h2").greenify({ "color": "red", "background-color": "yellow" });
Comments
Post a Comment