用easyui写一个密码修改的dialog

最新推荐文章于 2023-03-02 09:20:23 发布

weixin_34351321

最新推荐文章于 2023-03-02 09:20:23 发布

阅读量707

点赞数

文章标签： javascript 数据库 python ViewUI

原文链接：https://my.oschina.net/u/1399599/blog/1548625

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果图如下：

需要准备的页面和js以及css如下：

modifyPswd.html

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Ajax Form - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#diagl").click(function() {
					$('#dlg').dialog({
						title: '修改密码',
						iconCls: "icon-edit",
						collapsible: true,
						minimizable: true,
						maximizable: true,
						resizable: true,
						width: 300,
						height: 200,
						modal: true
					});
				});

			});
		</script>
	</head>

	<body>
		<button id="diagl">点击展示对话框</button>
		<div id="dlg" style="display: none;">
			<div class="bodydiv">
				<div class="content-main-view">
					<form id="modifPwd" method="post">
						<div style="margin-top: 20px; margin-left: 25px;">
							<div class="trs">
								<label>原密码:</label>
								<div>
									<input class="easyui-textbox" type="password" id="login_passwd_new_re" name="login_passwd_new_re" data-options="required:true"></input>
								</div>
							</div>
							<div class="trs">
								<label>新密码:</label>
								<div>
									<input class="easyui-textbox" type="password" id="login_passwd_new_re" name="login_passwd_new_re" data-options="required:true"></input>
								</div>
							</div>
							<div class="trs">
								<label>确认密码:</label>
								<div>
									<input class="easyui-textbox" type="password" id="login_passwd_new_re" name="login_passwd_new_re" data-options="required:true"></input>
								</div>
							</div>
						</div>
					</form>
					<div class="main-view-button-group">
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="do_submit();">提交</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeWin();">取消</a>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

需要的js如下：

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

需要的css如下：

base.css

label{
	display:block;
	float:left;
	width:80px;
	padding-top: 5px;
	}
.main-view-button-group{
	width: 200px;
	margin-left:auto;
	margin-right: auto;
	margin-top: 10px;
	}
.easyui-linkbutton{
	display: inline-block;
	margin-left: 35px;
	width: 50px;
	}
.trs{
	margin-top: 5px;
	}
.easyui-textbox{
	width: 120px;;
}

icon.css（这个是直接从easyui的demo里拿出来的）

.icon-blank{
	background:url('icons/blank.gif') no-repeat center center;
}
.icon-add{
	background:url('icons/edit_add.png') no-repeat center center;
}
.icon-edit{
	background:url('icons/pencil.png') no-repeat center center;
}
.icon-clear{
	background:url('icons/clear.png') no-repeat center center;
}
.icon-remove{
	background:url('icons/edit_remove.png') no-repeat center center;
}
.icon-save{
	background:url('icons/filesave.png') no-repeat center center;
}
.icon-cut{
	background:url('icons/cut.png') no-repeat center center;
}
.icon-ok{
	background:url('icons/ok.png') no-repeat center center;
}
.icon-no{
	background:url('icons/no.png') no-repeat center center;
}
.icon-cancel{
	background:url('icons/cancel.png') no-repeat center center;
}
.icon-reload{
	background:url('icons/reload.png') no-repeat center center;
}
.icon-search{
	background:url('icons/search.png') no-repeat center center;
}
.icon-print{
	background:url('icons/print.png') no-repeat center center;
}
.icon-help{
	background:url('icons/help.png') no-repeat center center;
}
.icon-undo{
	background:url('icons/undo.png') no-repeat center center;
}
.icon-redo{
	background:url('icons/redo.png') no-repeat center center;
}
.icon-back{
	background:url('icons/back.png') no-repeat center center;
}
.icon-sum{
	background:url('icons/sum.png') no-repeat center center;
}
.icon-tip{
	background:url('icons/tip.png') no-repeat center center;
}
.icon-filter{
	background:url('icons/filter.png') no-repeat center center;
}
.icon-man{
	background:url('icons/man.png') no-repeat center center;
}
.icon-lock{
	background:url('icons/lock.png') no-repeat center center;
}


.icon-mini-add{
	background:url('icons/mini_add.png') no-repeat center center;
}
.icon-mini-edit{
	background:url('icons/mini_edit.png') no-repeat center center;
}
.icon-mini-refresh{
	background:url('icons/mini_refresh.png') no-repeat center center;
}

.icon-large-picture{
	background:url('icons/large_picture.png') no-repeat center center;
}
.icon-large-clipart{
	background:url('icons/large_clipart.png') no-repeat center center;
}
.icon-large-shapes{
	background:url('icons/large_shapes.png') no-repeat center center;
}
.icon-large-smartart{
	background:url('icons/large_smartart.png') no-repeat center center;
}
.icon-large-chart{
	background:url('icons/large_chart.png') no-repeat center center;
}

然后就可以直接运行查看效果了。

转载于:https://my.oschina.net/u/1399599/blog/1548625