将css添加到自定义可重用功能

Question

i created a function in jQuery which lets me create a lightbox as following:

var lightbox = create_lightbox(params);

I would like to expand this function so i can add custom css to it and make it look like a feel in any given circumstance. I would prefer to be able to do the folowing:

    lightbox.css = {
    "background-color" : "red",
    etc...

}

What would be the best way to do this and how would i iterate over the css elements inside my function?

tyvm

Answer 1

Create your function to take an object with all the values you want to add to your lightbox's css property, then add in your defaults with jQuery's extend.

function create_lightbox(params, css){
    css = $.extend({ "background-color": "default val"}, css);

    lightbox.css = css;
}

If you really want to loop over all the properties in css, you could use a for in loop

function create_lightbox (params, css) {
   css = $.extend({ "background-color": "default val"}, css);

   for (cssKey in css)
     lightbox.css[cssKey] = css[cssKey];
}

Answer 2

Just use CSS as CSS should be used: In a <style>-tag or a linked .css-file. The lightbox plugin uses the following dom tree;

<div id="jquery-lightbox">
    <div id="lightbox-container-image-box">
        <div id="lightbox-container-image">
            <img id="lightbox-image" />
            <div id="lightbox-nav">...</div>
        </div>
    </div>
</div>

So then style what you want to style. I guess you dpn't want to use different styles on each of your boxes?

Answer 3

You can add an element property to the lightbox class so you can modify value out of the constructor:

function lightbox() {
    this.element = document.ccreateElement("div")
    this.light = "light";
    this.box = "box";
}

var newLightBox = new lightbox();
newLightBox.element.style.background = "#000";