您的位置：首页 > 其它

插件实现添加用户信息到页面表格

2012-03-28 19:31 567 查看

<!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>

<style>

body { font-size: 62.5%; }

label, input { display:block; }

input.text { margin-bottom:12px; width:95%; padding: .4em; }

fieldset { padding:0; border:0; margin-top:25px; }

h1 { font-size: 1.2em; margin: .6em 0; }

div#user-info { width: 350px; margin: 20px 0; }

div#user-info table { margin: 1em 0; border-collapse: collapse; width: 100%; }

div#user-info table td, div#user-info table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }

.ui-dialog .ui-state-error { padding: .3em; }

.validateTips { border: 1px solid transparent; padding: 0.3em; }

</style>

<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

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

<link type="text/css" href="./css/jquery-ui-1.8.18.custom.css" rel="stylesheet"><script type="text/javascript" language="javascript">

$(function() {

$( "#dialog:ui-dialog" ).dialog( "destroy" );

var name = $( "#name" ),

email = $( "#email" ),

password = $( "#password" ),

allFields = $( [] ).add( name ).add( email ).add( password ),

tips = $( ".validateTips" );

function updateTips( t ) {

tips

.text( t )

.addClass( "ui-state-highlight" );

setTimeout(function() {

tips.removeClass( "ui-state-highlight", 1500 );

}, 500 );

}

$( "#dialog-form" ).dialog({

autoOpen: false,

height: 300,

width: 350,

modal: true,

buttons: {

"创建一个新用户": function() {

$( "#users tbody" ).append( "<tr>" +

"<td>" + name.val() + "</td>" +

"<td>" + email.val() + "</td>" +

"<td>" + password.val() + "</td>" +

"</tr>" );

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

},

"取消": function() {

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

}

},

close: function() {

allFields.val( "" ).removeClass( "ui-state-error" );

}

});

$( "#create-user" )

.button()

.click(function() {

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

});

});

</script>

</head>

<body>

<div id="demo">

<div id="dialog-form" title="Create new user">

<form>

<fieldset>

<label for="name">姓名：</label>

<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />

<label for="email">邮箱：</label>

<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

<label for="password">密码：</label>

<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

</fieldset>

</form>

</div>



<div id="user-info" class="ui-widget">

<table id="users" class="ui-widget ui-widget-content" border="1">

<h1>增加用户信息</h1>

<thead>

<tr class="ui-widget-header ">

<th>姓名</th>

<th>邮箱</th>

<th>密码</th>

</tr>

</thead>

<tbody>

<tr>

<td>John Doe</td>

<td>john.doe@example.com</td>

<td>johndoe1</td>

</tr>

</tbody>

</table>

</div>

<input type="button" id="create-user" value="创建一个新用户">

</div>

</body>

</html>

效果图：

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

标签：

相关文章推荐

新的分享

章节导航