我试图制作一个jquery模式插件,不明白为什么我的回调函数会在页面加载时启动?我需要在打开弹出窗口之前触发两个函数-- beforeStart和弹出窗口打开后的afterComplete --不是在页面加载时,而是在页面加载时。密码有什么问题。我搜索了一整天还是找不到。this stackoverflow 也不适合我。
这是我的密码
<script>
$(document).ready(function (e) {
$(".selector").coolBox({
OverlayClose: false,
complete : function(){//this should called when my plugin finished its work
console.log("complete");
},
beforeStart: function(){
console.log("before Start");
}
});
})
</script>
编辑:这是完整的插件代码
;(function ($, window) {
$.coolBox = function (options) {
}
$.coolBox.closeCoolBox = function () {
console.log("closeCoolBox closes");
$("#clBoxOverlay,#clBoxOuterWrapper").remove();
};
$.coolBox.openCoolBox = function (options) {
console.log("closeCoolBox opens");
$("#inlineOverlayCloseDisabled").trigger("click");
//$.fn.coolBox(options);
$(this).each(function () {
console.log($(this));
})
};
$.fn.coolBox = function (options) {
console.log("calls to opens");
var settings = {
complete: false,
beforeStart: false,
Background: "#333",
Opacity: "0.8",
Padding: "10px",
Height: "auto",
Width: "auto",
OverlayClose: true,
EscClose: true,
Zindex: "99991",
Border: "2px",
BorderColor: "black",
PopUp: "fixed"
};
var o = {};
$.extend(o, settings, options);
//is this not for event handling before starting my plugin to change DOM?
if (typeof o.beforeStart == 'function') {
o.beforeStart.call(this); // brings the scope to the callback
}
return this.each(function () {
var link = $(this);
link.click(function (event) {
var clBox = document.createElement('div');
clBox.setAttribute("id", "clBoxWrapper");
document.body.appendChild(clBox);
$clBoxWrapper = $("#clBoxWrapper");
$clBoxWrapper.wrap($("<div id='clBoxOuterWrapper'></div>"));
oBox = document.getElementById("clBoxOuterWrapper");
oBox.style.width = o.Width;
oBox.style.height = o.Height;
if (o.PopUp == "fixed") {
oBox.style.position = "fixed";
} else {
oBox.style.position = "absolute";
}
oBox.style.zIndex = o.Zindex + 1;
var olBox = document.createElement('div');
olBox.setAttribute("id", "clBoxOverlay");
olBox.style.width = "100%";
olBox.style.height = "100%";
olBox.style.position = "fixed";
olBox.style.zIndex = o.Zindex;
olBox.style.opacity = o.Opacity;
olBox.style.backgroundColor = o.Background;
olBox.style.top = "0px";
olBox.style.left = "0px";
document.body.appendChild(olBox);
$wrapContent = link.attr("href");
//alert($wrapContent);
if ($wrapContent.indexOf("#") == 0) {
$wrapContainer = $($wrapContent).html();
//alert($wrapContainer);
$oBoxWrapper = $("#clBoxOuterWrapper");
$clBoxOverlay = $("#clBoxOverlay");
$clBoxOverlay.css({
"height": $(document).innerHeight(),
"width": $(document).innerWidth(),
});
if ($oBoxWrapper.length) {
$clBoxWrapper.html($wrapContainer);
if (o.PopUp == "fixed") {
$oBoxWrapper.css({"maxHeight": $(window).height()});
if ($oBoxWrapper.innerHeight() >= $(window).height()) {
$oBoxWrapper.css("overflowY", "scroll");
}
if ($oBoxWrapper.innerWidth() >= $(window).width()) {
$oBoxWrapper.css("overflowX", "scroll");
}
}
$oBoxWrapper.css({
"left": ($(window).width() - $oBoxWrapper.innerWidth()) / 2,
"top": ($(window).height() - $oBoxWrapper.innerHeight()) / 2
});
}
}
event.preventDefault();
});
//is this not event handling code after my plugin finished it task?
if (typeof o.complete == 'function') {
o.complete.call(this); // brings the scope to the callback
}
});
}
})(jQuery, window)
它显示页面加载时图像中的信息,但当我单击选择器链接时,它不会触发我的回调函数。
发布于 2014-10-05 09:43:39
如果要在触发单击事件时启动完整的回调函数,只需将调用移到内部:
;(function ($, window) {
$.fn.coolBox = function (options) {
console.log("calls to opens");
var settings = {
complete: false,
beforeStart: false,
Background: "#333",
Opacity: "0.8",
Padding: "10px",
Height: "auto",
Width: "auto",
OverlayClose: true,
EscClose: true,
Zindex: "99991",
Border: "2px",
BorderColor: "black",
PopUp: "fixed"
};
var o = {};
$.extend(o, settings, options);
//is this not for event handling before starting my plugin to change DOM?
if (typeof o.beforeStart == 'function') {
o.beforeStart.call(this); // brings the scope to the callback
}
return this.each(function () {
var link = $(this);
link.click(function (event) {
var clBox = document.createElement('div');
clBox.setAttribute("id", "clBoxWrapper");
document.body.appendChild(clBox);
$clBoxWrapper = $("#clBoxWrapper");
$clBoxWrapper.wrap($("<div id='clBoxOuterWrapper'></div>"));
oBox = document.getElementById("clBoxOuterWrapper");
oBox.style.width = o.Width;
oBox.style.height = o.Height;
if (o.PopUp == "fixed") {
oBox.style.position = "fixed";
} else {
oBox.style.position = "absolute";
}
oBox.style.zIndex = o.Zindex + 1;
var olBox = document.createElement('div');
olBox.setAttribute("id", "clBoxOverlay");
olBox.style.width = "100%";
olBox.style.height = "100%";
olBox.style.position = "fixed";
olBox.style.zIndex = o.Zindex;
olBox.style.opacity = o.Opacity;
olBox.style.backgroundColor = o.Background;
olBox.style.top = "0px";
olBox.style.left = "0px";
document.body.appendChild(olBox);
$wrapContent = link.attr("href");
//alert($wrapContent);
if ($wrapContent.indexOf("#") == 0) {
$wrapContainer = $($wrapContent).html();
//alert($wrapContainer);
$oBoxWrapper = $("#clBoxOuterWrapper");
$clBoxOverlay = $("#clBoxOverlay");
$clBoxOverlay.css({
"height": $(document).innerHeight(),
"width": $(document).innerWidth(),
});
if ($oBoxWrapper.length) {
$clBoxWrapper.html($wrapContainer);
if (o.PopUp == "fixed") {
$oBoxWrapper.css({"maxHeight": $(window).height()});
if ($oBoxWrapper.innerHeight() >= $(window).height()) {
$oBoxWrapper.css("overflowY", "scroll");
}
if ($oBoxWrapper.innerWidth() >= $(window).width()) {
$oBoxWrapper.css("overflowX", "scroll");
}
}
$oBoxWrapper.css({
"left": ($(window).width() - $oBoxWrapper.innerWidth()) / 2,
"top": ($(window).height() - $oBoxWrapper.innerHeight()) / 2
});
}
}
event.preventDefault();
// THIS IS THE CALLBACK CALLED AT THE END OF CLICK
if (typeof o.complete == 'function') {
o.complete.call(this); // brings the scope to the callback
}
});
});
}
})(jQuery, window);
您可以在这里查看:http://jsfiddle.net/benjasHu/eyka9z0b/
这就是你需要的吗?
https://stackoverflow.com/questions/26197541
复制相似问题