您的位置：首页 > Web前端 > JQuery

jQuery实现弹窗动态添加用户信息【详细注解】

2012-06-20 17:39 746 查看

<!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/javascript" src="../../include/jquery.js"></script>

< script language="javascript" type="text/javascript" src="../../include/jquery-ui-1.8.18.custom.min.js"></script>

< link rel="stylesheet" href="../../include/css/ui-lightness/jquery-ui-1.8.18.custom.css" />

< script>

$(function (){

//注册对话框

$("#dialog").dialog({

//设置对话框打开的方式不是自动打开

autoOpen:false,

show:"blind",

hide:"explode",

modal:true,

buttons:[

{

text:"添加",

click:function (){

//获取姓名

var name=$("input[id=name]").val();

//获取专业

var zhuanye=$("input[id=phone]").val();

//手机

var phone=$("input[id=zhiwei]").val();

var $tr=$("<tr style='background-color:#FFF'><td align='center' width='200'>"+name+"</td><td align='center' width='200'>"+zhuanye+"</td><td align='center' width='200'>"+phone+

"</td></tr>");

$tr.appendTo("#table2");

$(this).dialog("close");

}

},{

text:"取消",

click:function(){

$(this).dialog("close");

}

}

],

closeOnEscape:false, //是否esc

title:"添加用户操作界面", //对话框标题

position:"center",//对话框弹出的位置 top left right center bottom 默认是center

width:400, //对话框宽度

height:330, //对话框高度

resizable:false, //是否可以改变大小操作默认true

});

//触发连接的事件当点击连接打开一个对话

$("#dialog_link").click(function (){

//open参数作用：打开对话框

$("#dialog").dialog("open");

});

});

< /script>

< /head>

<body>

< table id="table2" width="600" border="1" style="background-color:#9F0;" cellpadding="0" cellspacing="0">

<caption>学生信息</caption>

<tr style="background-color:#F7B64A">

<th>姓名</th>

<th>手机</th>

<th>职位</th>

</tr>

< /table>

< br />

<a href="#" id="dialog_link"><span></span>添加</a>



<div id="dialog" align="center">

<br />

姓名：<input type="text" id="name" name="name" /><br /><br />

手机：<input type="text" id="phone" name="phone" /><br /><br />

职位：<input type="text" id="zhiwei" name="zhiwei" /><br /><br />

</div>

</body>

< /html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航