Question

<script type="text/javascript"> 
    clBoxActive = true;
    clBoxTrigger = "cl-trigger";
    clBoxTriggerType = "#";
    clBoxClass = "overlay-box";
    clEffectIn = "fade";
    clEffectOut = "fade";
    clOnLoad = false;
    clAllowExit = true;
</script>

这就是我现在所拥有的。它可以选择执行类似于脚本的灯箱，点击触发器，然后打开：

<div class="overlay-box" style="display:none;">
    <div class="ol-wrapper">
        <div class="ol-box-content">
            This is the overlay box content.
        </div>
    </div>
    <div class="ol-box-bg">&nbsp;</div> 
</div>

ol-box-bg是jquery拉出浏览器高度和宽度的背景，并将css设置为框，其余部分位于style.css中，它表示position：absolute;和不透明度，以及其他的东西，只是通过透视使其变黑...

ol-box-content是内容框，它有一个包装器允许它居中，但除此之外它在style.css中的类似属性就像ol-box-bg ..

我的问题是......我试图让它变得更加动态，我可以允许多个灯箱触发器打开不同的框来覆盖页面内容。但是我遇到了问题，变量只能设置一次，我不知道从哪里开始..

我注意到有些人会这样做：

optionName: optionvalue

但我不确定它是什么，或者它是如何使用的。

Answer 1

可能是创建插件的好选择。

这看起来像是：

(function($){
    $.fn.extend({ 
        clBox: function(options) {
            var defaults = {
                clBoxActive: true,
                clBoxTrigger: 'cl-trigger',
                clBoxTriggerType: '#',
                clEffectIn: 'fade'
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                var obj = $(this);

                // do stuff with matching elements
                obj.click(function() {
                    // e.g. open lightbox
                });

                // to access an option simply use option.name
                console.log(options.clBoxTrigger);             
            });
        }
    });
})(jQuery);

现在，您可以将插件与默认选项或自定义选项一起使用。

$(document).ready(function() {
  // with default options
  $('.elements1').clBox();

  // with custom options
  $('.elements2').clBox({clBoxActive: false, clEffectIn: 'slide'});
});

没有变量的变量选项？

1 个答案: