jquery完成界面无刷新加载登陆注册
昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成
贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面
1这里是html内容
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery鼠标点击弹出登录框代码</title> 6 </head> 7 <body> 8 <br><br><br><br><br><br><br> 9 <div class="login-header"><a href="javascript:void(0);">点击,弹出登录框</a></div> 10 <div class="login-header1"><a href="javascript:void(0);">点击,弹出登录框</a></div> 11 12 <div id="js_login" class="js_login"> 13 <div class="js_title"> 14 <ul> 15 <li class="conxk1" id="_xka1" onclick="switchTag('_xka','_xka_list',1,2,'conxk1','conxk2');"> 16 用户登录 17 </li> 18 <li class="conxk2" id="_xka2" onclick="switchTag('_xka','_xka_list',2,2,'conxk1','conxk2');"> 19 快速注册 20 </li> 21 </ul> <span class="close-login">×</span> 22 </div> 23 <div class="js_content"> 24 <div class="con_dak fixed clear"> 25 <div id="_xka_list1" class="showbox"> 26 <div class="de_list"> 27 <!----------login start------> 28 <div id="login"> 29 <div class="inputbg" id="logtext"> 30 <input name="logusername" id="logusername" type="text" value="输入用户名" placeholder="输入用户名" class="inputsub" /> 31 </div> 32 <div class="inputbg" id="pass"> 33 <input name="logpassword" placeholder="输入密码" type="password" value="" id="logpassword" class="inputsub" /> 34 </div> 35 <div class="buttons"> 36 <input type="button" class="sub_btn1" id="login-submokaoba" onclick="ajaxlogin()" value="登 录" /> 37 </div> 38 <div class="clr"></div> 39 <div class="reg"> 40 忘记密码?<a href="http://www.mokaoba.com/">找回密码</a> <span id="errmsg"></span> 41 </div> 42 </div> 43 <!--------login end---------> 44 </div> 45 </div> 46 47 48 <div id="_xka_list2" class="hidden"> 49 <div class="de_list"> 50 <!--------register start---------> 51 <form method="post" enctype="multipart/form-data" name="userinfoform" id="userinfoform"> 52 <input type="hidden" name="enews" value="register" /> 53 <input name="groupid" type="hidden" id="groupid" value="1" /> 54 <div id="register"> 55 <ul class="Reg-input"> 56 <li class="Reg-text">用户名:</li> 57 <li><input name="UserName" id="UserName" type="text" class="input-text" required="" /> <span class="UserName"></span></li> 58 </ul> 59 <ul class="Reg-input"> 60 <li class="Reg-text">密码:</li> 61 <li><input name="Password" onblur="CheckReg('Password', this.value)" type="password" id="Password" class="input-text" required="" /> <span class="Password"></span></li> 62 </ul> 63 <ul class="Reg-input"> 64 <li class="Reg-text">重复密码:</li> 65 <li><input name="repassword" onblur="CheckReg('repassword',this.value)" type="password" id="repassword" class="input-text" required="" /> <span class="repassword"></span></li> 66 </ul> 67 <ul class="Reg-input"> 68 <li class="Reg-text">真实姓名:</li> 69 <li><input name="RealName" onblur="CheckReg('RealName', this.value)" type="text" id="RealName" class="input-text" required="" /> <span class="RealName"></span></li> 70 </ul> 71 <ul class="Reg-input"> 72 <li class="Reg-text">手机号码:</li> 73 <li><input name="Telephone" onblur="CheckReg('Telephone', this.value)" type="text" id="Telephone" class="input-text" required="" /> <span class="Telephone"></span></li> 74 </ul> 75 <ul class="Reg-input"> 76 <li class="Reg-text">E-mail:</li> 77 <li><input name="Mail" onblur="CheckReg('Mail', this.value)" type="text" id="Mail" class="input-text" required="" /> <span class="Mail"></span></li> 78 </ul> 79 <ul class="Reg-input"> 80 <li class="Reg-text"> </li> 81 <li id="checkbox"><input type="checkbox" id="checkin" onclick="checkpass('all')" /> 我已阅读并接受《<a href="/http://www.jiao4.com/javascript" target="_blank">服务条款</a>》</li> 82 </ul> 83 <div style="clear:both"></div> 84 <div class="buttons"> 85 <input type="button" class="sub_btn1" id="Reg-submokaoba" onclick="ajaxzhuce()" name="zhuce" value="注 册" /> <span id="checkreg"></span> 86 </div> 87 <div class="clr"></div> 88 </div> 89 </form> 90 <!--------register end---------> 91 </div> 92 </div> 93 </div> 94 </div> 95 </div> 96 <div class="login-bg"></div> 97 </body> 98 </html>
2接下来是样式css
@charset "utf-8";/*/*登陆//by liangguanyu/*/.js_login h1, h2, h3, h4, h5, h6, p, ul, li {padding: 0;margin: 0;list-style: none;}.login-header {text-align: center;height: 30px;font-size: 24px;line-height: 30px;}.js_login {display: none;position: fixed;opacity: 1;z-index: 11000;left: 50%;margin-left: -250px;top: 100px;}.js_login a {color: blue;text-decoration: none;}.sub_btn1 { /*position:absolute; right:0px; top:50px;*/width:105px;height:35px;display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;align-content:centerfont: 15px/100% Arial, Helvetica, sans-serif;text-shadow: 0 1px 1px rgba(0,0,0,.6);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);color: white; /*#e8f0de*/border: solid 1px #538312;background: #64991e; /* #64991e*/background: -webkit-gradient(linear, left top, left bottom, from(#43CD80), to(#3CB371)); /*#7db72f #4e7d0e*/background: -moz-linear-gradient(top, #7db72f, #4e7d0e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');}.sub_btn1:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#2E8B57), to(#008B45));background: -moz-linear-gradient(top, #6b9d28, #436b0c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');}.inputbg {height: 40px;width: 280px;margin: 0 auto;margin-top: 20px;border-radius: 4px;border: 1px solid #eee;text-align: left;color: #333;}#username * {vertical-align: middle;}.inputsub {outline: 0;font-family: Tahoma,Geneva,sans-serif;font-size: 14px;width: 270px;float: left;border: none;text-align: left;color: #333;margin: 10px 0 3px 8px;background: none;overflow: hidden;}.buttons {width: 280px;margin: 0 auto;margin-top: 25px;text-align: left;}#login-submokaoba {width: 105px;height: 35px;}#qql {float: right;}.reg {padding: 20px;margin: 0 auto;width: 280px;}#login {margin-top: 20px;}.hidden {display: none;}.js_login {position: absolute;width: 500px;background: #fff;display: none;color: #999;}.js_login .js_title {overflow: hidden;height: 42px;background: #f9f9f9 url(http://www.jiao4.com/java) repeat-x;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}.js_login .js_title span {float: right;line-height: 40px;padding: 0 9px;cursor: pointer;font-family: "";font-size: 30px;}.js_login .js_title span:hover {color: #555;}.js_login .js_title li {float: left;width: 130px;text-align: center;font-family: "微软雅黑";font-size: 18px;cursor: pointer;height: 43px;}.js_login .js_title li a {float: left;width: 130px;text-align: center;}.js_login .js_title li a:hover {}.conxk1 {border-top: 3px solid #15B300;border-right: 1px solid #dfdfdf;background: #fff;height: 39px;line-height: 39px;color: #11B200;}.conxk1 a {color: #11B200;}.conxk1 a:hover {color: #11B200;text-decoration: none;}.conxk2 {border-right: 1px solid #dfdfdf;height: 39px;line-height: 39px;padding-top: 3px;color: #646464;}.conxk2 a {color: #646464;}.conxk2 a:hover {color: #646464;text-decoration: none;}.js_login .js_content {overflow: hidden;padding: 13px 15px;background: #fff;border: 1px solid #ccc;border-top-width: 0px;}.js_login .js_content .de_list {width: 100%;padding-top: 12px;}.js_login .js_content a:visited {color: blue;}.js_login .js_content a:hover {color: red;text-decoration: underline;}.Reg-input {display: block;clear: both;padding: 5px 0;}.Reg-input li {display: inline;float: left;}.Reg-input .input-text {width: 220px;height: 25px;border: 1px solid #ccc;outline: none;border-radius: 2px;}.input-text:focus {border: 1px solid #339933;}.Reg-input .Reg-text {width: 100px;text-align: right;font-size: 14px;}.Reg-input .input_text {width: 70px;float: left;}.js_login #checkbox {text-align: left;}.js_login #errmsg {color: red;}.js_login .sub_btn1 {font-size: 20px;}#lean_overlay {position: fixed;z-index: 100;top: 0px;left: 0px;height: 100%;width: 100%;background: #000;display: none;}
后面更上js,记得要把jquery给加上哦!红色区域的代码负责登陆注册点击切换的事件,在代码点击方法加上黄色代码可在点击后加载到当前界面!
<script type="text/javascript">$(function () {H_login = {};H_login.openLogin = function () {$('.login-header a').click(function () {switchTag('_xka', '_xka_list', 1, 2, 'conxk1', 'conxk2');$('.js_login').show();$('.login-bg').show();});$('.login-header1 a').click(function () {switchTag('_xka', '_xka_list', 2, 2, 'conxk1', 'conxk2');$('.js_login').show();$('.login-bg').show();});};H_login.closeLogin = function () {$('.close-login').click(function () {$('.js_login').hide();$('.login-bg').hide();});};H_login.loginForm = function () {};H_login.run = function () {this.closeLogin();this.openLogin();this.loginForm();};H_login.run();});function switchTag(tag, content, k, n, stylea, styleb) {for (i = 1; i <= n; i++) {if (i == k) {document.getElementById(tag + i).className = stylea;document.getElementById(content + i).className = "showbox"} else {document.getElementById(tag + i).className = styleb;document.getElementById(content + i).className = "hidden"}}};function ajaxlogin() {var username = $("#logusername");var usernameValue = $("#logusername").val();var password = $("#logpassword");var passwordValue = $("#logpassword").val();alert(usernameValue + passwordValue); window.location.reload();}function ajaxzhuce() {var usernameValue = $("#UserName").val();var passwordValue = $("#Password").val();var realNameValue = $("#RealName").val();var telephoneValue = $("#Telephone").val();var emailValue = $("#Mail").val();alert(usernameValue + passwordValue + realNameValue + telephoneValue + emailValue); window.location.reload();} </script>
给大家看一下效果哈!
最后献上demo:http://download.csdn.net/detail/nightmareyan/9590361
转载于:https://www.cnblogs.com/Agui520/p/5720618.html
jquery完成界面无刷新加载登陆注册相关推荐
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- 一行代码实现全站pjax无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax的网站,响应速度很快,今天一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,但是由于我是老的媒体范板子 ...
- 使用 pjax 实现网站无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax优化的网站,响应速度很快,今天看到玖梦博客的一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,故发文记 ...
- WordPress自适应白天暗夜高颜值无刷新加载首页支持三种布局 v2.4
一款基于WordPress开发的高颜值的自适应主题,支持白天与黑夜模式.首页支持三种布局:博客风格,cms风格,企业风格 主题特性 支持白天与暗黑模式 全局无刷新加载 支持博客与CMS布局 内置WP优 ...
- WordPress自适应白天暗夜无刷新加载三种布局模板源码
一款基于Wordpress开发的高颜值的自适应主题,支持白天与黑夜模式.首页支持三种布局:博客风格,cms风格,企业风格 主题特性: 支持白天与暗黑模式 全局无刷新加载 支持博客与CMS布局 内置WP ...
- Jquery导航条淡进淡出相册(动态无刷新加载数据库数据)
原理:AJAX动态加载数据库中图片信息给游览器,利用2个叠词div动态修改内部图片透明度做出淡进淡出效果.(IE6无效) 难点:json数组操作. HTML:就是几个图片容器.加载大图的div pos ...
- php pjax数据返回,如何将Pjax整合进网站,实现全站无刷新加载?
摘要: pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后退 ...
- pjax php demo,Pjax无刷新加载页面基础示例
前言 今天浏览了一些精美的前端页面,然后看见有些页面运用了Pjax,让整个页面加载很快.之前很久就想去看看Pjax是怎么实现的了,今天就去了解了一下,然后懂得了他的运行原理.下面就来分享一下. 运行原 ...
- WordPress自适应主题Puock v2.4/白天暗夜高颜值无刷新加载首页支持三种布局
☑️ 编号:ym418 ☑️ 品牌:WordPress ☑️ 语言:php ☑️ 大小:1.85MB ☑️ 类型:自适应主题 ☑️ 支持:pc+wap
最新文章
- 什么镜头最适合拍风景_尼康Z口20mm的镜头拍什么好
- 机器学习 欧式距离及代码实现
- Weblogic远程调试
- 【服务器框架】(AsyncSelect模型、Windows平台)
- 64位CentOs7源码安装mysql-5.6.35过程分享
- 数论练习(1)——取余运算(快速幂)
- 【Python3网络爬虫开发实战】4-解析库的使用-3 使用pyquery
- python enumerate函数_Python中enumerate函数用法详解
- 早起21天,奖你 1000元!
- linux下telnet到h3c交换机Backspace无效
- hive jdbc驱动_Hive的安装方式
- 手机音频拼接软件_自媒体视频,手机剪辑有哪些软件推荐?
- ssr客户端android!Android开发真等于废人?看看这篇文章吧!
- 砍价小程序怎么变成二维码(小程序码)
- ubuntu修改ip地址
- SWD调试接口接上下拉电阻
- 不愧是阿里P8!后端程序员必备的Linux基础知识+常见命令
- linux输入多行内容至文件
- 巩膜分割论文:ScleraSegNet: an Improved U-Net Model with Attention for Accurate Sclera Segmentation
- 数字标牌/广告机无线组网方案
热门文章
- webService学习3:客户端生成webservice代码
- springmvc rest风格化案例
- springboot 问题Change project compliance and JRE to 1.5
- wait(),notify(),notifyAll()进行了详细的分析介绍
- 互联网公司面试经历(转载)
- dojo中的dojo/dom-style
- Kafka是靠什么机制保持高可靠,高可用的?
- 通过java api操作hdfs(kerberos认证)
- 推荐系统遇上深度学习(二十)-贝叶斯个性化排序算法原理及实战
- Yearning v1.4.2 发布,SQL审核平台