easyui 编写的登陆框

最新推荐文章于 2019-09-23 16:52:22 发布

原创最新推荐文章于 2019-09-23 16:52:22 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#easyui css

html/css/javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用 EasyUI 构建简洁的登陆界面，包括样式配置、窗口布局、表单输入及按钮交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

注意：jquery-1.6.min.js 一定要在 jquery.easyui.min.js之前，不然会出现js错误

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" onclick="javascript:document.getElementById('form1').submit();">登录</a>
		  			    
		  			<a class="easyui-linkbutton" onclick="javascript:document.getElementById('form1').reset();">重置</a>
		  		</div>
  			</form>
  		</div>
  	</div>
</body>

3、具体效果如下所示：