昨晚自习完回到宿舍,继续搞我的弹出框,悲催地一直找不到函数,看来真的是糊涂了,一直没有想到是导入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);
};