MyLibrary 界面设计(一)-主页设计
郁闷的~~鼠标坏了...昨天晚上用的鼠标超不爽的...最后只能看电影了,嘿嘿....这两天抽个小空把界面画好了,使用的是Ext2.0
下面是效果图和代码
效果图1:
下面是JS和JSP:
UserLogin.js:
Ext.onReady(function(){ Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var myForm1 = new Ext.form.FormPanel(
{
renderTo:"login",title:"图书管理系统欢迎您",width:400,labelAlign:"right",height:130,onSubmit: Ext.emptyFn,
frame : true,
collapsible : true,
defaultType: 'textfield',
tools:
[
{id:"help",handler:function(){Ext.MessageBox.alert("系统消息","普通用户登陆")}}
],
defaults : {
// 验证字段是否能为空
allowBlank : false,
},
items:[
{fieldLabel:"用户名",blankText:'用户名不能为空',name:"UserName",fieldClass:"textfieldlength"},
{fieldLabel:"密码",blankText:"密码不能为空",inputType:"UserPwd",minLength:6,minLengthText:'密码至少6位',name:"password",fieldClass:"textfieldlength"}
],
buttons: [
{text: '提交', type:"button"},
{text: '重置', type:"reset",handler:function(){myForm1.form.reset();}}
]
});
var myForm2 = new Ext.form.FormPanel(
{
renderTo:"register",title:"新用户注册",width:400,labelAlign:"right",height:150,onSubmit: Ext.emptyFn,
frame : true,
collapsible : true,
draggable:true,
defaultType: 'textfield',
defaults : {
// 验证字段是否能为空
allowBlank : false,
},
tools:
[
{id:"help",handler:function(){Ext.MessageBox.alert("系统消息","普通用户注册")} }
],
items:[
{fieldLabel:"请输入用户名",blankText:'用户名不能为空',name:"RegName",fieldClass:"textfieldlength"},
{fieldLabel:"请输入密码",blankText:"密码不能为空",inputType:"password",minLength:6,minLengthText:'密码至少6位',name:"RegPwd",fieldClass:"textfieldlength"},
{fieldLabel:"请输入E-Mail",blankText:"E-Mail不能为空",vtype:'email',name:"RegEmail",fieldClass:"textfieldlength"}
],
buttons: [
{text: '注册', type:"button"},
{text: '重置', type:"reset",handler:function(){myForm2.form.reset();}}]
});
});
UserLogin.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户登陆</title>
<link rel="stylesheet" href="js/ext-2.0/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="js/Main/UserLogin.js"></script>
</head>
<body style="background-image: url(images/MainBlack1.jpg); ">
<div align="right"><img src="images/imman.png" style="cursor:pointer;" onclick="window.open('Main/ManageLogin.jsp')"/></div>
<div id="login" style="padding-top:2%; padding-left:55%;"></div>
<div id="register" style="padding-top:2%;padding-left:55%;"></div>
</body>
</html>
效果图2:
嘿嘿 JSP和JS就不贴了...差不多的~~~~还有个移动没有解决...慢慢解决