<!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 removeUser(id){
var txt = '确定要删除吗?<input type="hidden" id="userid" name="userid" value="'+ id +'" />';
$.prompt(txt,{
buttons:{Delete:true, Cancel:false},
callback: function(v,m){
var uid = m.find('#userid').val();
if(v){$('#userid'+uid).hide('slow', function(){ $(this).remove(); });}
else{}
}
});
}
</script>
</head>
<body>
<div class="wrapper">
<div id="users">
<div id="userid1" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(1);">Delete</a>
</span>
<span class="fname">John</span>
<span class="lname">Doe</span>
</div>
<div id="userid2" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(2);">Delete</a>
</span>
<span class="fname">Jane</span>
<span class="lname">Doe</span>
</div>
<div id="userid3" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(3);">Delete</a>
</span>
<span class="fname">Bill</span>
<span class="lname">Smith</span>
</div>
<div id="userid4" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(4);">Delete</a>
</span>
<span class="fname">Steve</span>
<span class="lname">Jones</span>
</div>
<div id="userid5" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(5);">Delete</a>
</span>
<span class="fname">Will</span>
<span class="lname">Johnson</span>
</div>
<div id="userid6" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(6);">Delete</a>
</span>
<span class="fname">Harold</span>
<span class="lname">Anderson</span>
</div>
</div>
</div>
</body>
</html>
<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 removeUser(id){
var txt = '确定要删除吗?<input type="hidden" id="userid" name="userid" value="'+ id +'" />';
$.prompt(txt,{
buttons:{Delete:true, Cancel:false},
callback: function(v,m){
var uid = m.find('#userid').val();
if(v){$('#userid'+uid).hide('slow', function(){ $(this).remove(); });}
else{}
}
});
}
</script>
</head>
<body>
<div class="wrapper">
<div id="users">
<div id="userid1" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(1);">Delete</a>
</span>
<span class="fname">John</span>
<span class="lname">Doe</span>
</div>
<div id="userid2" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(2);">Delete</a>
</span>
<span class="fname">Jane</span>
<span class="lname">Doe</span>
</div>
<div id="userid3" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(3);">Delete</a>
</span>
<span class="fname">Bill</span>
<span class="lname">Smith</span>
</div>
<div id="userid4" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(4);">Delete</a>
</span>
<span class="fname">Steve</span>
<span class="lname">Jones</span>
</div>
<div id="userid5" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(5);">Delete</a>
</span>
<span class="fname">Will</span>
<span class="lname">Johnson</span>
</div>
<div id="userid6" class="user">
<span class="controls">
<a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(6);">Delete</a>
</span>
<span class="fname">Harold</span>
<span class="lname">Anderson</span>
</div>
</div>
</div>
</body>
</html>