我正在创建一个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',
});
答案 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)