EasyUI 編寫簡潔的登陸框
1、引入easyui 所以得js和css文件 如下所示：
<link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>easyui/themes/icon.css">
<script type="text/javascript" src="<%=path%>/easyui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="<%=path%>/easyui/jquery.easyui.min.js"></script> 2、開始編寫登陸框，如下所示：
<body style="height:100%;width:100%;overflow:hidden;border:none;visibility:visible;background:#f0f1f1" >
<div class="easyui-window" title="用戶登陸" style="height:300px;width:500px;background:#fafafa"
collapsible="false" minimizable="false" maximizable="false" closable="false" >
<div class="header" style="height:60px;padding:0px;magin:0px;background:url(images/bg-nav.png) repeat;">
<div style="margin:0 auto;padding:20px 160px;font-size:22px;text-shadow:1px 1px rgba(152,135,162,.5);color:#fff;">圖書管理系統</div>
</div>
<div style="padding:30px 0px;">
<form action="login.action" method="post" id="form1">
<div style="text-align:center">
<label style="text-align:right;text-shadow:1px 1px rgba(0,0,0,.3);">用戶名：</label>
<input type="text" name="userDO.username"
style="height:25px;border:0px;background:url(images/search-input.png) no-repeat;padding-left:10px;border-radius:5px 5px 5px 5px;color:#fff;"/>
</div>
<div style="text-align:center;margin-top:15px;text-shadow:1px 1px rgba(0,0,0,.3);">
<label style="text-align:right;">密 碼：</label>
<input type="password" name="userDO.password"
style="height:25px;border:0px;background:url(images/search-input.png) no-repeat;padding-left:10px;border-radius:5px 5px 5px 5px;color:#fff;"/>
</div>
<div style="padding-left:200px;margin-top:5px;text-shadow:1px 1px rgba(0,0,0,.3);">
<label style="text-align:right;">管理員</label>
<input type="radio" name="operate" value="admin" style="height:25px;"/>
<label style="text-align:right;">普通用戶</label>
<input type="radio" name="operate" value="user" style="height:25px;" checked/>
</div>
<div style="padding-left:185px;margin-top:10px;text-shadow:1px 1px rgba(0,0,0,.3);">
<a class="easyui-linkbutton" οnclick="javascript:document.getElementById('form1').submit();">登錄</a>
<a class="easyui-linkbutton" οnclick="javascript:document.getElementById('form1').reset();">重置</a>
</div>
</form>
</div>
</div>
</body>3、具體效果如下所示：
