关于login的弹出框

昨晚自习完回到宿舍,继续搞我的弹出框,悲催地一直找不到函数,看来真的是糊涂了,一直没有想到是导入js文件的问题,花费了不少时间调整。贴出我的登录界面与大家分享,不好不要喷我 ^ _ ^ :

顺便把部分源码也贴出来:

这是导入的一些外部文件:

	<link rel="stylesheet" href="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/themes/ui-darkness/jquery.ui.all.css">
	
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.7.1.js"></script>
	<script src="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/ui/jquery.ui.core.js"></script>
	<script src="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/ui/jquery.effects.core.js"></script>
	<script src="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/ui/jquery.effects.fold.js"></script>
	
	<script src="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/ui/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/ui/jquery.ui.accordion.js"></script>
	<script src="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/ui/jquery.ui.button.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/register_login.js"></script>
	
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/register_login.css">
	<link rel="stylesheet" href="<%=request.getContextPath() %>/js/jquery-ui-1.8.18/demos/demos.css">

样式表:register_login.css

/* 提示框 样式*/
#effect {
	width: 240px;
	height: 135px;
	padding: 0.4em;
	position: relative;
}

/* 提示框 样式*/
#effect h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
}

/* 输入文本框背景 */
.input_wrapper {
	width: 219px;
	height: 64px;
	
	/* 图像水平和垂直位置 */
	background: url('../images/input.png') 0 11px no-repeat;
	border-width: 0;
	float: left;
	position: relative
}

/* 文本框透明 */
.logintext {
	background: transparent;
	border: 1px solid #ffffff;
	width: 180px;
	height: 29px;
	font-size: 25px
}


/* 密码输入框样式 */
.passwdcss {
	background: transparent;
	border: 1px solid #ffffff;
	width: 180px;
	height: 29px;
	font-size: 25px;
}


.btn a.preview {
	background: #E4E4E4;
	color: #333;
}

.btn a {
	display: inline-block;
	padding: 4px 12px;
	background: #2999B9;
	color: white;
	font-weight: bold;
	border-radius: 10px;
	font-size: 28px;
}

a {
	/* 无修饰:如下划线 */
	text-decoration: none;
}

/* 鼠标划过时 */
.btn a.preview:hover {
	background-color: #333;
	color: #fff;
}

javascript:register_login.js

/**
 * 当 DOM(文档对象模型) 已经加载
 * ,并且页面(包括图像)已经完全呈现时
 * ,会发生 ready 事件
 */
$(document).ready(function(){
	$( "#back" ).button();
	$( "#effect" ).hide();
});

/**
 * 清空文本域
 */
function cls() {
	var event = event || window.event;
	with(event.srcElement)
	if (value == defaultValue) {
		value = "";
	}
}

/**
 * 重置为默认值
 */
function res() {
	with(event.srcElement)
	if(value == "") {
		value = defaultValue;
	}
}

/**
 * 将文本框隐藏,密码框显示
 */
function changtxt() {
	objtxt = document.getElementById('passwdtxt');
	objpwd = document.getElementById('passwd');
	objtxt.style.display = 'none';
	objpwd.style.display = '';
	objpwd.focus();
}

/**
 * 将文本框隐藏,密码框显示
 */
function changtxt2() {
	objtxt = document.getElementById('checkpasswdtxt');
	objpwd = document.getElementById('checkpasswd');
	objtxt.style.display = 'none';
	objpwd.style.display = '';
	objpwd.focus();
}

/**
 * 将密码框隐藏,文本框显示
 */
function changpwd() {
	objtxt = document.getElementById('passwdtxt');
	objpwd = document.getElementById('passwd');
	if (objpwd.value == '') {
		objtxt.style.display = '';
		objpwd.style.display = 'none';
		objtxt.value = '密码';
	}
}

/**
 * 将密码框隐藏,文本框显示
 */
function changpwd2() {
	objtxt = document.getElementById('checkpasswdtxt');
	objpwd = document.getElementById('checkpasswd');
	if (objpwd.value == '') {
		objtxt.style.display = '';
		objpwd.style.display = 'none';
		objtxt.value = '确认密码';
	}
}

/**
 * 检查合法性
 */
function checklogin() {
	var form = document.forms[0];
	form.action = '/platform/lubinsu/control/user/register_login_login';
	objtxt = document.getElementById('username');
	objpwd = document.getElementById('passwd');
	if(objtxt.value == '' || objtxt.value == '用户名') {
		showmessage('请输入用户名!');
		objtxt.focus();
		return;
	}
	
	if(objpwd.value == '' || objpwd.value == '密码') {
		showmessage('请输入密码!');
		objpwd.focus();
		return;
	}
	
	form.submit();
}

function checkname() {
	var form = document.forms[0];
	objtxt = document.getElementById('username');
	objpwd = document.getElementById('passwd');
	objcheckpwd = document.getElementById('checkpasswd');
	
	if(objtxt.value == '' || objtxt.value == '用户名') {
		showmessage('请输入用户名!');
		objtxt.focus();
		return;
	}
	
	if(objpwd.value == '' || objpwd.value == '密码') {
		showmessage('请输入密码!');
		objpwd.focus();
		return;
	}else if(objpwd.value != objcheckpwd.value) {
		showmessage('输入密码不一致!');
		objcheckpwd.focus();
		return;
	}
	var url = "/platform/lubinsu/control/user/register_login_checkregister";
	var uname = objtxt.value;
	$.ajax({
    	url:url,
    	type: "POST",
    	dataType: "text",
    	data: {username:uname},
    	success: function(data) {
    		if(data == "该用户已存在请重新输入!") {
    			/*$("#warnbox").attr("style","color: red; font-size: 13px;");*/
	    		showmessage(data);
	    		return;
    		}
    		if(data == "恭喜!该用户未被注册!") {
    			/*$("#warnbox").attr("style","color: green; font-size: 13px;");*/
	    		showmessage(data);
	    		form.submit();
    		}
    	}
    });
}

/**
 * 弹出警告
 * 
 * @param message
 */
function showmessage(message){
	$("#warnbox").html(message);
	runEffect();
	
	/*
	 * 界面不好看
	 * 
	 * $.messager.show({
		title: '警告',
		msg:message,
		timeout:4000,
		showType:'slide'
	});*/
}

/**
 * 显示隐藏的注册用的文本框
 */
function change() {
	var form = document.forms[0];
	form.action = '/platform/lubinsu/control/user/register_login_register';
	objdiv = document.getElementById('registd');
	register1 = document.getElementById('register1');
	register2 = document.getElementById('register2');
	objdiv.style.display = '';
	register1.style.display = 'none';
	register2.style.display = '';
}

/**
 * 弹出提示框
 */
function runEffect() {
	// most effect types need no options passed by default
	var options = {};

	// run the effect
	$("#effect").show("fold", options, 500, callback);
};

//callback function to bring a hidden box back
function callback() {
	setTimeout(function() { $("#effect:visible").removeAttr("style").fadeOut(); }, 1000);
};


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值