本文介绍如何利用艺术对话框技术实现网页上的用户登录功能，包括对话框的创建、交互逻辑、登录验证和反馈处理。
梦想：
点某按钮，弹出一个对话框，
例如：选中几台电脑后，弹出，确定删除这些电脑吗？按下确定时，就调用asp.net删去。
需要的知识：
参考1：
<script src="jiaocheng.js"></script>
<script src="artDialog/artDialog.source.js?skin=default"></script>
<script src="artDialog/plugins/iframeTools.source.js"></script>
</head>
<body>
<a href="#" onclick="d()">登录</a><br/>
</body>
注：上面的d()在jiaocheng.js之中，如下所示：
function d(){
art.dialog.open('login_iframe.html', { //这个login_iframw.html里是些什么？
id: 'ajax-login',
width: '30em',
title: '用户登录',
okVal:'登录', // 这里有一个 登录 按钮
ok: function () {
var iframe = this.iframe.contentWindow;
if (!iframe.document.body) {
art.dialog({
width: '15em',
time: 2,
content: '页面还没加载完毕呢'
});
return false;
};
var form = iframe.document.getElementById('login-form'),
username = iframe.document.getElementById('login-form-username'),
password = iframe.document.getElementById('login-form-password');
if (check(username) && check(password))
{
var fmdo = 'login';
var dopost = 'login';
var userid = iframe.document.getElementById('login-form-username').value;
var pwd = iframe.document.getElementById('login-form-password').value;
$.ajax({
type:'post',
url:'index.php',
data:{
fmdo:fmdo,
myset:'ajax',
dopost:dopost,
userid:userid,
pwd:pwd
},
success:function(data,status){
if(data=='su'){
parent.art.dialog.list['ajax-login'].close();
art.dialog({
width: '15em',
time: 2,
content: '成功登录!'
});
}else{
art.dialog({
width: '15em',
time: 2,
content: '登录失败!'
});
}
return false;
}
});
return false;
}
return false;
},
cancel: true
});
var check = function (input) {
if (input.value === '') {
inputError(input);
input.focus();
return false;
} else {
return true;
};
};
var inputError = function (input) {
clearTimeout(inputError.timer);
var num = 0;
var fn = function () {
inputError.timer = setTimeout(function () {
input.className = input.className === '' ? 'login-form-error' : '';
if (num === 5) {
input.className === '';
} else {
fn(num ++);
};
}, 150);
};
fn();
};
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
