前段时间写了一个修改用户信息的js自我感觉不好,今天用jquery插件写了一个 很不错和大家分享下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Impromptu - Demo 1</title>
<style type="text/css">
body,img,p,h1,h2,h3,h4,h5,h6,fieldset,form,table,td,ul,li,pre,blockquote,code{ margin:0; padding:0; border:0; }
body{ font: 100% Georgia, "Times New Roman", serif; background-color: #ffffff; color: #565656; text-align: center; }
div.wrapper{ position: relative; margin: 0 auto 30px auto; width: 500px; text-align: left; border: solid 1px #aaaaaa; }
#users{ }
#users .user{ border: solid 1px #bbbbbb; background-color: #dddddd; padding: 10px; margin: 5px; }
#users .user .controls{ float: right; }
/*-------------impromptu---------- */
.jqiwarning .jqi{ background-color: #b0be96; }
.jqifade{ position: absolute; background-color: #333333; }
div.jqi{ position: absolute; background-color: #d0dEb6; padding: 10px; width: 300px; text-align: left; }
div.jqi .jqiclose{ float: right; margin: -35px -10px 0 0; cursor: pointer; }
div.jqi .jqicontainer{ background-color: #e0eEc6; padding: 5px; color: #ffffff; font-weight: bold; }
div.jqi .jqimessage{ background-color: #c0cEa6; padding: 10px; }
div.jqi .jqibuttons{ text-align: center; padding: 5px 0 0 0; }
div.jqi button{ padding: 3px 10px 3px 10px; margin: 0 10px; }
/*-------------------------------- */
</style>
<script language="" src="../练习/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-impromptu.1.5.js"></script>
<script type="text/javascript">
function editUser(id){
var user = $('#userid'+id)
var fname = user.find('.fname').text();
var lname = user.find('.lname').text();
var txt = 'What would you like to change this to?'+
'<div class="field"><label for="editfname">用户名</label><input type="text" id="editfname" name="editfname" value="'+ fname +'" /></div>'+
'<div class="field"><label for="editlname">密码</label><input type="text" id="editlname" name="editlname" value="'+ lname +'" /></div>';
$.prompt(txt,{
buttons:{Change:true, Cancel:false},
submit: function(v,m){
//this is simple pre submit validation, the submit function
//return true to proceed to the callback, or false to take
//no further action, the prompt will stay open.
var f = m.find('#editfname').val();
var l = m.find('#editlname').val();
var flag = true;
if($.trim(f) == '' && v){
m.find('#editfname').addClass('error');
flag = false;
}else m.find('#editfname').removeClass('error');
if($.trim(l) == '' && v){
m.find('#editlname').addClass('error');
flag = false;
}else m.find('#editlname').removeClass('error');
return flag;
},
callback: function(v,m){
var f = m.find('#editfname').val();
var l = m.find('#editlname').val();
if(v){user.find('.fname').text(f);
user.find('.lname').text(l);}
else{}
}
});
}
</script>
</head>
<body>
<div class="wrapper">
<div id="users">
<div id="userid1" class="user">
<span class="controls">
<a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(1);">Edit</a>
</span>
<span class="fname">John</span>
<span class="lname">1234</span>
</div>
<div id="userid2" class="user">
<span class="controls">
<a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(2);">Edit</a>
</span>
<span class="fname">Jane_sj</span>
<span class="lname">5151</span>
</div>
<div id="userid3" class="user">
<span class="controls">
<a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(3);">Edit</a>
</span>
<span class="fname">B_sh</span>
<span class="lname">aa</span>
</div>
<div id="userid4" class="user">
<span class="controls">
<a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(4);">Edit</a>
</span>
<span class="fname">dasdsa</span>
<span class="lname">aa</span>
</div>
<div id="userid5" class="user">
<span class="controls">
<a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(5);">Edit</a>
</span>
<span class="fname">dadsa</span>
<span class="lname">aa</span>
</div>
<div id="userid6" class="user">
<span class="controls">
<a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(6);">Edit</a>
</span>
<span class="fname">g1s</span>
<span class="lname">aa</span>
</div>
</div>
</div>
</body>
</html>