您的位置：首页 > Web前端 > JQuery
jquery插件实现添加用户！

2012-03-28 21:23 525 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script language="javascript" type="text/jscript" src="./js/jquery-1.7.1.min.js" /></script>
<script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js" /></script>
<link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" href="./css/demo.css" />
<script type="text/javascript" language="javascript">

$(document).ready(function(){

$("#dialog").dialog({

autoOpen:false,		//设置对话框打开方式，不是自动打开
show:"blind",      	//打开时的动画效果
hide:"explode",		//关闭时的动画效果
modal:true,			//是否遮罩，true表示遮罩效果，false表示非遮罩
draggable:false,		//是否可以拖动效果  默认值true表示可以拖动默认值false表示不可拖动
closeOnEscape:false,	//是否采用esc键退出对话框，如果false表示不采用，默认值true表示采用
title:"添加用户",	 	//对话框的标题
position:"center",		//对话框弹出位置 top bottom center left right 默认值为center
width:400,				//对话框宽度
height:250,			//对话框高度
resizable:false,		//是否可以改变的操作  如果为false表示不可改变大小  默认值为true表示可以改变大小

buttons:
[{

text:"确定",
click:function (){
//点击确定之后获取表单输入的值
var textval=$("#name").val();
var sexval=$("#sex").val();
var ageval=$("#age").val();
var telval=$("#tel").val();
//向表格中添加用户
$("#users")
.append("<tr align='center'><td>"+textval+"</td><td>"+sexval+"</td><td>"+ageval+"</td><td>"+telval+"</td><td><a href='#' id='del'>删除</a></td></tr>");

//删除当前行
$("td a").click(function (){

$(this).parents("tr").remove();

});

//关闭对话框
$(this).dialog("close");

}
},

{
text:"取消",
click:function (){
$(this).dialog("close");
}

}],

});

//触发连接的事件  当你点击 连接打开一个对话框
$("#dialog_link").click(function (){

$("#dialog").dialog("open");//open参数， 作用是打开对话框

});

});
</script>

<style>
#dialog_link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;}

#dialog_link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;}

</style>

<style>
body { font-size: 10px; }
label, input { display:block; }
input.text { margin-bottom:12px; width:90%; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: center; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
</head>

<body>

<table width="298" height="36" border="0" id="users" class="ui-widget ui-widget-content">
<h3>用户列表:</h3>
<tr class="ui-widget-header " align="center">
<td width="48">姓名</td>
<td width="48">性别</td>
<td width="48">年龄</td>
<td width="57">电话</td>
<td width="63">操作</td>
</tr>
</table>

<br><br><br><br>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">添加用户</a>

<div id="dialog" title="添加用户">

姓名：<input type="text" id="name" /><br>
性别：<input type="text" id="sex" /><br>
年龄：<input type="text" id="age" /><br>
电话：<input type="text" id="tel" /><br>

</div>

</body>
</html>
效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航