MyLibrary 界面设计(一)-主页设计

condeywadl

浏览: 78268 次
性别:
来自: 南京

最近访客更多访客>>

zpf_ztxa

lcebear

cbh119

bsll

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

MyLibrary设计之路

EXT JavaScript CSS JSP prototype

郁闷的~~鼠标坏了...昨天晚上用的鼠标超不爽的...最后只能看电影了,嘿嘿....这两天抽个小空把界面画好了,使用的是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: