$(function() {
//表单区域(包括所有表单)
var $form_wrapper= $('#form_wrapper'),
//当前显示的表单以class名为 actvie 显示
$currentForm= $form_wrapper.children('form.active'),
//更改链接
$linkform= $form_wrapper.find('.linkform');
//获取每个表单的宽度和高度并且保存供以后用
$form_wrapper.children('form').each(function(i){
var $theForm= $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width: $theForm.width(),
height: $theForm.height()
});
});
setWrapperWidth();
/*
点击表单里的链接(改变表单事件),是当前表单隐藏。
容器促使它的宽度和高度动态地适应新的表单的尺寸。
动画过后,新的表单显示出来。
*/
$linkform.bind('click',function(e){
var $link= $(this);
var target= $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
//移除当前表单的 active 类
$currentForm.removeClass('active');
// 新的表单
$currentForm= $form_wrapper.children('form.'+target);
//使容器动起来
$form_wrapper.stop()
.animate({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
},500,function(){
//新的表单的样式赋予 active
$currentForm.addClass('active');
//展示新的表单
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
});
}
/*
本实例禁止了表单按钮的提交
如果你想提交表单,你必须去检查哪个表单需要被提交,并且让该表单处于激活状态以显示出来。
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});