我想只需单击一个按钮创建我的对象，这是一个表单，但当按钮触发时，它会加载表单。我的构造函数可能都是错的，所以如果你发现任何错误或建议，他们将不胜感激。我已经在我遇到麻烦的代码中评论了
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
current = jQuery('.wikiform .wizard :first');
var width = 0;
function positionForm() {
jQuery('.wikiform .wizard .view').each(function () { width += jQuery(this).width() });
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height() + 10)
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width() + 10)
.css('left', -jQuery('.wikiform').width())
.css('overflow', 'hidden')
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('width', width)
.css('height', jQuery('.wikiform .wizard .view:first').height());
}
if (this.Mode == "Wizard") {
return this.each(function () {
/* <-- this function here not binding */
jQuery(this).bind('load', function (){
positionForm();
});
jQuery('.wikiform .navigation input[name^=Next]').click(function () {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '-=' + current.width() + "px" }, 750, null, function () {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function () {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '+=' + current.prev().width() + 'px' }, 750, null, function () {
current = current.prev();
});
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
/*
jQuery(window).bind("load", function () {
});
*/
jQuery('button[name=button1]').bind('click', function (e) {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed: 750, ease: "expoinout" });
/* problem here initalizing the load */
e.preventDefault();
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0 }
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute; display:block;
}
.wizard
{
overflow:hidden;
}
.wizard .panel
{
}
.view
{
float:left;
}
.wizard .panel .view
{
float:left;
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:400px;
height:400px;
}
#view3
{
background-color:Lime;
width:300px;
height:300px;
}
</style><form action="" method="">
<div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
<button id="button1" name="button1" value="1"> Click Me! </button>
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
<div id="view3" class="view">
<div class="form">
Content 3
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div>
答案 0 :(得分：1)
您是否可以在初始化代码的末尾将调用发送到positionForm()？像这样：
if (this.Mode == "Wizard") {
return this.each(function() {
jQuery('.wikiform .navigation input[name^=Next]').click(function() {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '-=' + current.width() + "px"
}, 750, null, function() {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function() {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '+=' + current.prev().width() + 'px'
}, 750, null, function() {
current = current.prev();
});
});
positionForm();
});
}
我在这里用小提琴更新了你的代码：http://jsfiddle.net/andrewwhitaker/vztcq/
修改：要垂直居中模式对话框，请在计算垂直位置时使用$(window).height()代替window.screen.availHeight。有关详细信息，请参阅jQuery的height文档。更新了小提琴：http://jsfiddle.net/andrewwhitaker/bBCeq/
我注意到的其他一些事情：
$代替jQuery。设置插件的匿名函数采用名为$的参数，并将jQuery作为参数。在我看来，这会使你的代码更具可读性。$(..).css({'width': '10px', 'height': '10px'});。<form>的结尾为</form>。在您发布的代码中，结束标记丢失了。var $wikiForm = $(".wikiform")）