我如何让这段代码工作？ [英] How Do I Get This Piece Of Code Working?
本文介绍了我如何让这段代码工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的所有人。
我有一个登录和单身应用程序，它不使用JQuery + Java脚本来改变表单外观（UI）。我已经下载了一个JQuery表单，我刚刚将它添加到我的应用程序中但是当我按下登录按钮时没有任何反应。这是我的代码。
Dear All.
I have a login and singup application where it works not using JQuery + Java script to change form look and feel (UI). I have downloaded a JQuery form and i just added it to my application but when i press the login button nothing happens. Here is my code.
@model SimpleLogInSystem.Models.UserModel
@{
ViewBag.Title = "LogIn";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Animated Form Switching with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
<meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
<link rel="shortcut icon" href="../../Images/bg.gif" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="../../Content/style.css" />
<script src="../../Scripts/cufon-yui.js" type="text/javascript"></script>
<script src="../../Scripts/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { textShadow: '1px 1px #fff' });
Cufon.replace('h2', { textShadow: '1px 1px #fff' });
Cufon.replace('h3', { textShadow: '1px 1px #000' });
Cufon.replace('.back');
</script>
</head>
<body>
<div class="wrapper">
<h1>Animated Form Switching</h1>
<h2>Demo: click the <span>orange links</span> to see the form animating and switching</h2>
<div class="content">
<div id="form_wrapper" class="form_wrapper">
<form id="myForm" class="login active">
<h3>Login</h3>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true, "Login Failed, Check your login details.")
<div>
@Html.LabelFor(u => u.Email)</div>
<div>@Html.TextBoxFor(u => u.Email)
@Html.ValidationMessageFor(u => u.Email)</div>
<div>@Html.LabelFor(u => u.Password)</div>
<div>@Html.PasswordFor(u => u.Password)
@Html.ValidationMessageFor(u => u.Password)</div>
<input type="submit" id="Login" value="Log In" />
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<div class="clear"></div>
</div>
}
</form>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
$(function () {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$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()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click', function (e) {
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400, function () {
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm = $form_wrapper.children('form.' + target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
}, 500, function () {
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth() {
$form_wrapper.css({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
});
</script>
推荐答案
（ function （ ）{
// 表单包装器（包括所有表单）
var
form_wrapper =
form_wrapper =
（' ＃form_wrapper'），
// 当前表格是具有类别活动的表格
这篇关于我如何让这段代码工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
