使用jQuery插件实现添加用户
2012-03-28 21:53
639 查看
<!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> <!-- 引入js类库 --> <script language="javascript" src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script language="javascript" src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> <!-- 引入css类库 --> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" /> <script type="text/javascript" language="javascript"> $(function (){ //利用jQuery获取输入的信息 var $name=$("#name") ; var $mail=$("#email"); var $paw=$("#password"); $("#create-user").dialog({ autoOpen:false, //设置对话框的打开方式 不是自动打开 show:"blind", //打开时的效果 hide:"explode" ,//关闭时的效果 modal:true , //遮罩效果 false 非遮罩效果 buttons:[ { text:"ok", click:function (){ //把内容添加到表格中 $("#users-contain table").append("<tr><td>"+$name.val()+"</td><td>"+$mail.val()+"</td><td>"+$paw.val()+"</td></tr>") ; $(this).dialog("close"); //关闭对话框 } }, { text:"cancel", click:function (){ $(this).dialog("close"); //关闭对话框 } } ], draggable:true, //可以拖动时 true 可以拖动 默认值就是true closeOnEscape:true, //false 是否采用esc键退出对 话框 如果true 采用esc title:"添加用户操作界面", position:"top", //对话框弹出的位置 可以是top left right width:300,//对话框的宽度 height:400, resizable:false, //是否可以改变高度 zIndex:1000, drag:function (event,ui){ // $("#dialog") //对话框当前的坐标位置 } }); //触发连接的事件,当你点击 链接 打开一个对话 $("#create-user_link").click(function (){ //open参数 作用 打开一个对话框 $("#create-user").dialog("open"); }); //我怎么获取,我设置的options中的参数值 }); </script> </head> <body> <div class="demo"> <div id="create-user" title="Create new user" style="display:none"> <p class="validateTips">All form fields are required.</p> <form> <fieldset> <label for="name">Name</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> <label for="email">Email</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> <label for="password">Password</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> </fieldset> </form> </div> <div id="users-contain" class="ui-widget"> <h1>Existing Users:</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>Name</th> <th>Email</th> <th>Password</th> </tr> </thead> <tbody> <tr> <td>Suana Doe</td> <td>Su.doe@example.com</td> <td>suhndoe1</td> </tr> </tbody> </table> </div> <button id="create-user_link" >Create new user</button> </div> </body> </html>
![](http://my.csdn.net/uploads/201203/28/1332943008_2019.png)
相关文章推荐
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- 用jquery插件实现自动添加用户
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- jquery插件实现添加用户!
- jquery中插件实现自动添加用户的具体代码
- jquery中插件实现自动添加用户的具体代码
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- 使用jquery提供的抛物插件,实现添加商品出现抛物线动画
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- jquery中插件实现自动添加用户
- MyEclipse6.0中使用aptana插件,添加jquery提示功能
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 使用jquery插件实现图片延迟加载技术详细说明
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用Jquery blockUI插件实现在点击按钮提交后阻止再次点击,当处理完后解除阻止
- 用jquery实现添加新用户
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果