实例介绍
【实例简介】
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：jQuery弹出窗口切换登录与注册表单</title>
<meta name="keywords" content="jquery,注册" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="main">
<div class="demo">
<nav class="main_nav">
<ul>
<li><a class="cd-signin" href="#0">登录</a></li>
<li><a class="cd-signup" href="#1">注册</a></li>
</ul>
</nav>
</div>
<div class="cd-user-modal">
<div class="cd-user-modal-container">
<ul class="cd-switcher">
<li><a href="#0">用户登录</a></li>
<li><a href="#1">注册新用户</a></li>
</ul>
<div id="cd-login"> <!-- 登录表单 -->
<form class="cd-form">
<p class="fieldset">
<label>邮箱</label>
<input class="full-width has-padding has-border" id="signin-email" type="text" placeholder="输入邮箱">
</p>
<p class="fieldset">
<label>密码</label>
<input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="输入密码">
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me" class="remeber">记住登录状态</label>
</p>
<p class="fieldset">
<input class="full-width2" type="submit" value="登 录">
</p>
</form>
</div>
<div id="cd-signup"> <!-- 注册表单 -->
<form class="cd-form">
<p class="fieldset">
<label>邮箱</label>
<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="输入mail">
</p>
<p class="fieldset">
<label>密码</label>
<input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="输入密码">
</p>
<p class="fieldset">
<label>姓名</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="输入姓名">
</p>
<p class="fieldset">
<label>手机</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="输入手机号码">
</p>
<p class="fieldset">
<label>性别</label>
<input type="radio" name="signup-sex" value="">男
<input type="radio" name="signup-sex" value="">女
</p>
<p class="fieldset">
<input class="full-width2" type="submit" value="注册新用户">
</p>
</form>
</div>
<a href="#0" class="cd-close-form">关闭</a>
</div>
</div>
</div>
</body>
</html>
【实例截图】
【核心代码】
jQuery(document).ready(function($){
var $form_modal = $('.cd-user-modal'),
$form_login = $form_modal.find('#cd-login'),
$form_signup = $form_modal.find('#cd-signup'),
$form_modal_tab = $('.cd-switcher'),
$tab_login = $form_modal_tab.children('li').eq(0).children('a'),
$tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
$main_nav = $('.main_nav');
//弹出窗口
$main_nav.on('click', function(event){
if( $(event.target).is($main_nav) ) {
// on mobile open the submenu
$(this).children('ul').toggleClass('is-visible');
} else {
// on mobile close submenu
$main_nav.children('ul').removeClass('is-visible');
//show modal layer
$form_modal.addClass('is-visible');
//show the selected form
( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
}
});
//关闭弹出窗口
$('.cd-user-modal').on('click', function(event){
if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
$form_modal.removeClass('is-visible');
}
});
//使用Esc键关闭弹出窗口
$(document).keyup(function(event){
if(event.which=='27'){
$form_modal.removeClass('is-visible');
}
});
//切换表单
$form_modal_tab.on('click', function(event) {
event.preventDefault();
( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
});
function login_selected(){
$form_login.addClass('is-selected');
$form_signup.removeClass('is-selected');
$tab_login.addClass('selected');
$tab_signup.removeClass('selected');
}
function signup_selected(){
$form_login.removeClass('is-selected');
$form_signup.addClass('is-selected');
$tab_login.removeClass('selected');
$tab_signup.addClass('selected');
}
});
//credits http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
jQuery.fn.putCursorAtEnd = function() {
return this.each(function() {
// If this function exists...
if (this.setSelectionRange) {
// ... then use it (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
} else {
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
});
};
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论