添加样式到附加项目

时间:2012-06-22 17:56:27

标签: jquery jquery-plugins

我不确定如何说出这个问题,所以我猜这也是我找不到答案的原因..

我正在追加我在jQuery中创建的元素。我想为这些元素添加样式,但我的猜测是元素还不存在,所以它不起作用。什么是附加这些风格的好方法?我读了一些关于documentFragments的内容,但我不明白它们是如何工作的。

(我第一次尝试使用jquery插件:)

(function($) {
    $.fn.flPushbox = function(options) {
    settings = $.extend({
        pager: 'true'
    }, options);

    return this.each(function() {
        // set local variables  
        var $pushbox = $(this),
        $slides = $(this).children(),
        $viewport = $('<div class="fl-viewport" />'),
        init,
        initPager;

        //wrap ul with viewport
        init = function (){
            $pushbox.wrap($viewport);

            if (settings.pager) initPager();
        }

        initPager = function() {
            var $pager = $('<ul class="fl-pager" />');

            for (i=0; i<$slides.length; i++) {
                var $pagerSlide = $('<li>'+ i +'</li>');
                $pagerSlide.appendTo($pager);
            }

            $pager.insertAfter($pushbox);
        }

        initStyling = function() {
            var pushboxWidth = 0;

            $slides.each(function(index, slide) {                   
                pushboxWidth += parseInt($(slide).outerWidth());
            });

            $viewport.css({
                'position'  : 'relative',
                'overflow'  : 'hidden'
            });

            $slides.css({
                'float' : 'left'

            });

            $pushbox.css({
                'position'  : 'absolute',
                'top'       : 0,
                'left'      : 0,
                'width'     : pushboxWidth
            });
        }

        init();
        initStyling();
    });
}
})(jQuery);

0 个答案:

没有答案