文档准备好后,jquery附加一次

时间:2012-05-29 23:27:09

标签: jquery jquery-plugins

我正在创建一个jquery ligthbox只是为了学习,现在所有的工作都很大,但是,当我尝试调用插件超过两次时,那么,追加内容会重复自己。

在这里搜索,我找到了这段代码:

var appened = true;

if(appened){    
   //append code
   appened = false;
}

但这不适合我。我要做什么,以避免这种重复的内容?

以防这是我的代码:

(function($){

$.fn.shareBox = function(options){

     var defaults = {
        fadeSpeed : 500,
        hiddenElement: false,
        nameHideCont : ''//nombre del contenedor con clase hide
        },
        settings = $.extend(defaults, options);


        var appened = true;

     if(appened){   
            var lb = '<div class="lb-cont"></div><div class="sb-cont"></div>';
          $(lb).prependTo('body');

      appened = false;
    }


  var shareB = $('.sb-cont');


  shareB.css('display','none');


  this.each(function(){

    var obj = $(this);
    var verMas = $('a', obj)

    var lbw = shareB.width();



    obj.bind('click', function(){



        if(defaults.hiddenElement){
        var contenido = $('.'+defaults.nameHideCont, obj).clone(true, true).removeClass('hide');
      contenido.appendTo(shareB);

      }

        $('.lb-cont').fadeIn(defaults.fadeSpeed);
        shareB.fadeIn(defaults.fadeSpeed);
        shareB = $('.sb-cont');

        pos_obj();


        var cerrar = '<div id="cerrar-cont"><div id="cerrar">X</div></div>';
    $(cerrar).prependTo('.'+defaults.nameHideCont);
        $('.imagess').epicZoom({});
        var urlFace = $('#facebook').attr('st_url');
        var titFace = $('#facebook').attr('st_title');
        var urlTwi = $('#twitter').attr('st_url');
        var titTwi = $('#twitter').attr('st_title');
        var urlSha = $('#sharethis').attr('st_url');
        var titSha = $('#sharethis').attr('st_title');
        stWidget.addEntry({
             "service":"facebook",
             "element":document.getElementById('facebook'),
             "url":urlFace,
             "title":titFace,
             "type":"hcount",
             "text":titFace ,
             "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
             "summary":"this is description1"
     });
     stWidget.addEntry({
             "service":"twitter",
             "element":document.getElementById('twitter'),
             "url":urlTwi,
             "title":titTwi,
             "type":"hcount",
             "text":titTwi ,
             "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
             "summary":"this is description1"
     });
      stWidget.addEntry({
             "service":"sharethis",
             "element":document.getElementById('sharethis'),
             "url":urlSha,
             "title":'compartir',
             "type":"hcount",
             "text":titSha ,
             "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
             "summary":"this is description1"
     });
        return false;   

        });

        $('#cerrar').live('click', function(){
            $('.lb-cont').fadeOut('normal');
      shareB.fadeOut('normal', function(){
        $('.sb-cont .'+defaults.nameHideCont).remove();
        });

    });


        function pos_obj(){
              lbw = shareB.width();
              var arrPageSizes = ___getPageSize();
                $('.lb-cont').css({
                        width:      arrPageSizes[0],
                        height:     arrPageSizes[1]
                    });
           // Get page scroll
            var arrPageScroll = ___getPageScroll();
           shareB.css({
                        top: arrPageScroll[1] + (arrPageSizes[3] / 10),
                        left: (arrPageSizes[0]/2)-(lbw/2)+'px'
                        });

          }

        $(window).resize(function(){
               shareB = $('.sb-cont');
               var arrPageSizes = ___getPageSize();
               var arrPageScroll = ___getPageScroll();

               pos_obj();
      });

      /**
     / THIRD FUNCTION
     * getPageSize() by quirksmode.com
     *
     * @return Array Return an array with page width, height and window width, height
     */
    function ___getPageSize() {
        var xScroll, yScroll;
        if (window.innerHeight && window.scrollMaxY) {  
            xScroll = window.innerWidth + window.scrollMaxX;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        var windowWidth, windowHeight;
        if (self.innerHeight) { // all except Explorer
            if(document.documentElement.clientWidth){
                windowWidth = document.documentElement.clientWidth; 
            } else {
                windowWidth = self.innerWidth;
            }
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }   
        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else { 
            pageHeight = yScroll;
        }
        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){  
            pageWidth = xScroll;        
        } else {
            pageWidth = windowWidth;
        }
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
        return arrayPageSize;
    };
    /**
     / THIRD FUNCTION
     * getPageScroll() by quirksmode.com
     *
     * @return Array Return an array with x,y page scroll values.
     */
    function ___getPageScroll() {
        var xScroll, yScroll;
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
            xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
            yScroll = document.body.scrollTop;
            xScroll = document.body.scrollLeft; 
        }
        arrayPageScroll = new Array(xScroll,yScroll);
        return arrayPageScroll;
    };

    });


    }
})(jQuery); 

我用这种方式调用我的插件:

jQuery('.catalogo').shareBox({
        nameHideCont:'light-cont',
        hiddenElement:true
        });

jQuery('.images').shareBox({
        nameHideCont:'light-cont2',
        });

1 个答案:

答案 0 :(得分:0)

只需将prepend部分移出shareBox功能即可。这样,当你的插件注册时,它只会预先填充一次。

(function($){

$('body').prepend('<div class="lb-cont"></div><div class="sb-cont"></div>');

$.fn.shareBox = function(options){

     var defaults = {
        fadeSpeed : 500,
        hiddenElement: false,
        nameHideCont : ''//nombre del contenedor con clase hide
        },
        settings = $.extend(defaults, options);

  var shareB = $('.sb-cont');


  shareB.css('display','none');


  this.each(function(){

    var obj = $(this);
    var verMas = $('a', obj)

    var lbw = shareB.width();



    obj.bind('click', function(){



        if(defaults.hiddenElement){
        var contenido = $('.'+defaults.nameHideCont, obj).clone(true, true).removeClass('hide');
      contenido.appendTo(shareB);

      }

        $('.lb-cont').fadeIn(defaults.fadeSpeed);
        shareB.fadeIn(defaults.fadeSpeed);
        shareB = $('.sb-cont');

        pos_obj();


        var cerrar = '<div id="cerrar-cont"><div id="cerrar">X</div></div>';
    $(cerrar).prependTo('.'+defaults.nameHideCont);
        $('.imagess').epicZoom({});
        var urlFace = $('#facebook').attr('st_url');
        var titFace = $('#facebook').attr('st_title');
        var urlTwi = $('#twitter').attr('st_url');
        var titTwi = $('#twitter').attr('st_title');
        var urlSha = $('#sharethis').attr('st_url');
        var titSha = $('#sharethis').attr('st_title');
        stWidget.addEntry({
             "service":"facebook",
             "element":document.getElementById('facebook'),
             "url":urlFace,
             "title":titFace,
             "type":"hcount",
             "text":titFace ,
             "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
             "summary":"this is description1"
     });
     stWidget.addEntry({
             "service":"twitter",
             "element":document.getElementById('twitter'),
             "url":urlTwi,
             "title":titTwi,
             "type":"hcount",
             "text":titTwi ,
             "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
             "summary":"this is description1"
     });
      stWidget.addEntry({
             "service":"sharethis",
             "element":document.getElementById('sharethis'),
             "url":urlSha,
             "title":'compartir',
             "type":"hcount",
             "text":titSha ,
             "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
             "summary":"this is description1"
     });
        return false;   

        });

        $('#cerrar').live('click', function(){
            $('.lb-cont').fadeOut('normal');
      shareB.fadeOut('normal', function(){
        $('.sb-cont .'+defaults.nameHideCont).remove();
        });

    });


        function pos_obj(){
              lbw = shareB.width();
              var arrPageSizes = ___getPageSize();
                $('.lb-cont').css({
                        width:      arrPageSizes[0],
                        height:     arrPageSizes[1]
                    });
           // Get page scroll
            var arrPageScroll = ___getPageScroll();
           shareB.css({
                        top: arrPageScroll[1] + (arrPageSizes[3] / 10),
                        left: (arrPageSizes[0]/2)-(lbw/2)+'px'
                        });

          }

        $(window).resize(function(){
               shareB = $('.sb-cont');
               var arrPageSizes = ___getPageSize();
               var arrPageScroll = ___getPageScroll();

               pos_obj();
      });

      /**
     / THIRD FUNCTION
     * getPageSize() by quirksmode.com
     *
     * @return Array Return an array with page width, height and window width, height
     */
    function ___getPageSize() {
        var xScroll, yScroll;
        if (window.innerHeight && window.scrollMaxY) {  
            xScroll = window.innerWidth + window.scrollMaxX;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        var windowWidth, windowHeight;
        if (self.innerHeight) { // all except Explorer
            if(document.documentElement.clientWidth){
                windowWidth = document.documentElement.clientWidth;
            } else {
                windowWidth = self.innerWidth;
            }
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }   
        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else {
            pageHeight = yScroll;
        }
        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){  
            pageWidth = xScroll;        
        } else {
            pageWidth = windowWidth;
        }
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
        return arrayPageSize;
    };
    /**
     / THIRD FUNCTION
     * getPageScroll() by quirksmode.com
     *
     * @return Array Return an array with x,y page scroll values.
     */
    function ___getPageScroll() {
        var xScroll, yScroll;
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
            xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
            yScroll = document.body.scrollTop;
            xScroll = document.body.scrollLeft;
        }
        arrayPageScroll = new Array(xScroll,yScroll);
        return arrayPageScroll;
    };

    });


    }
})(jQuery)