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

$(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
        });

});

Answer 2

按照您现在设置插件的方式，slideShowShadow.css试图在加载时在themeSettings函数的范围之外分配slideshow.opacity，这意味着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对象。