jquery 主题设置选项

Question

创建这个主题时，我对 jquery 很陌生，并且像往常一样挣扎。

刚刚观看了本教程，并决定尝试制作自己的主题设置以简化自定义。

这就是我到目前为止所拥有的：

(function($){

        $.fn.themeSettings = function(options) {

                var
                  slideshow = {
                        opacity: '0.5'
                  },
                  settings = $.extend({}, defaults, options);         
        };

        var slideShowShadow = $('#slideShadowTop, #slideShadowBottom, #slideShadowLeft, #slideShadowRight');

        slideShowShadow.css({ 
                opacity: slideshow.opacity 
        });

})(jQuery);

任何帮助都会很棒，因为它搞乱了我还没有添加到主题中的当前 jquery。

我认为通过代码你可以看到我想要完成什么，但显然因为我是 jQuery 的新手，我不知道如何去做。

任何帮助将不胜感激，干杯

Answer 1

按照您现在设置插件的方式，slideShowShadow.css 尝试在加载时分配 slideshow.opacity，并且超出 themeSettings 的范围code> 函数，这意味着 slideshow.opacity 将为 undefined。您所要做的就是将最后几行移到 themeSettings 函数中，以便当您通过调用 $('#your_elem').themeSettings 将插件应用到某个元素时运行它们()：

(function($){
  $.fn.themeSettings = function(options) {

    var slideshow = {
          opacity: '0.5'
        },
        settings = $.extend({}, slideshow, options),
        slideShowShadow = $('#slideShadowTop, #slideShadowBottom, #slideShadowLeft, #slideShadowRight');

    slideShowShadow.css({ 
      opacity: settings.opacity 
    });
  };
})(jQuery);

注意：您的原始帖子在 $.extend 函数中引用了一个未定义的变量（default），我确信您本来打算将其作为slideshow 对象。

Answer 2

$(function(){

        var slideshow = {  
                opacity: 1,
                corners: true,
                shadows: true
        },
            xShadow = {
                opacity: 0.5      
        }; 

        // Slideshow Corners & Shadows        
        var $hWrap = $('#headerTopWrapper');

        if(slideshow.corners){
            $hWrap.prepend('<div id="slideCornersTop"></div>' + "\n" +
                           '<div id="slideCornersBottom"></div>');   
        }

        if(slideshow.shadows){
            $hWrap.prepend('<div id="slideShadowTop"></div>' + "\n" +
                           '<div id="slideShadowBottom"></div>' + "\n" +
                           '<div id="slideShadowRight"></div>' + "\n" +
                           '<div id="slideShadowLeft"></div>'); 
        }


        // Slideshow Shadow Opacity
        var $slideShowShadow = $('#slideShadowTop, #slideShadowBottom, #slideShadowLeft, #slideShadowRight');

        $slideShowShadow.css({
            opacity: xShadow.opacity
        });

});