`

onclick事件弹出login的登陆页面

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>

<link href="css/style.css" rel="stylesheet" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/common.js"></script>

    <div id="header">
    	<ul class="topNav">
		<li class="home"><a href="Page.action?returnPage=index">Home</a></li>
		<li class="pornstars"><a href="Page.action?returnPage=pornstar&word=AG">Pornstars</a></li>
		<li class="members"><a href="#" id="member">Members</a></li>
		<li class="signup"><a href="Page.action?returnPage=join">Signup</a></li>
			
        </ul>
    </div>
    
    <div id="loginForm"></div>
    
<script>
	function a()
	{
		var form1 = new Ext.form.FormPanel({
		       renderTo:"loginForm", 
		       labelWidth: 75, 
		       method:'POST',
		       title: '',
		       bodyStyle:'padding:20px 20px 0',
		       width: 300,
		       defaults: {width: 200},
		       defaultType: 'textfield',
		       
		       onSubmit: Ext.emptyFn,
		       submit: function() 
		       {
		           this.getEl().dom.action= 'openid.servlet'; 
		           this.getEl().dom.submit();
		       },
		       
		       items: [{
		           fieldLabel: 'username',
		           id: 'username', 
		           name: 'username',   
		           allowBlank:false,
		           blankText : "username is not null",
		           width:150
		           },{
		           fieldLabel: 'password',
		           blankText : "password is not null",
		           id: 'password',
		           name: 'password',
		           allowBlank:false,
		           width:150,
		           inputType:'password' 
		       }
		       ],
		       buttons: [{
		           text: 'login',
		           type:'button',
		           id:'login',
		           handler: function()
		           {
		                   if (form1.form.isValid())
		                   {    
		                       form1.form.submit();
		                   }    
		           }
		       },{
		           text: 'reset',
		           type:'reset',
		           id:'clear',
		           handler: function()
		           {
		                form1.form.reset();
		           }
		       }
		       ]
		       }); 
			
		var window = new Ext.Window({
			maximizable:true,
			minimizable:true,
			closable:true,
			modal:true,
			plain:true,
			resizable:false,
	        title: 'login dialog',
	        width: 300,
	        height:180,
	        layout: 'fit',
	        bodyStyle:'padding:5px;',
	        buttonAlign:'center',
	        items: form1
	    });
	   
	    window.show();   

	}
	
	Ext.onReady(function(){
		Ext.get("member").on("click",a);
		});
</script>    
    

上面是在点击“members” 链接后弹出个window的dialog,在这个window里面有加上了formpanel,所以才能达到我想要的效果。

 

另外透露一点:我刚开始学习extjs的时候,只把那3个文件导入到页面中,

<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

     当时只把这3个文件ext-all.css、ext-base.js和ext-all.js放在eclipse的extjs的这个目录下面,然后就开始开发了,但是当我在做上面问题的时候发现,要弹出的那个window窗口却没有"最大化","关闭","最小化"的图标,当时我查了好多文章没有找到原因,结果是这样的:它实际上是显示在页面中了,但是却看不到,用鼠标点击最右边却有这个功能的,所以最后的原因是:样式的的问题了,因为我没有把其它的样式引入进来的原因。所以最后把extjs3.0目录下面的resources的所有东西都考到那个extjs的eclipse目录下面来,结果就可以正常显示了。哈哈!终于搞定了。下面是正确的代码:<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

 

分享到:
评论

相关推荐

    弹出登录框的JQuery弹出浮动层

    "弹出登录框的JQuery弹出浮动层"就是一种常见的交互设计手法,它允许用户在不离开当前页面的情况下进行登录操作,提高了用户体验。JQuery,一个强大的JavaScript库,使得实现这样的功能变得更加简单。接下来,我们将...

    QQ js-sdk第三方授权登录 自定义登录按钮

    QQ JS-SDK第三方授权登录与...通过自定义登录按钮,我们可以灵活地设计登录界面,同时利用`showPopup()`方法实现点击事件触发的QQ登录弹窗。正确理解和使用这些API,将帮助我们为用户提供更加便捷、个性化的登录体验。

    Android开发:实现qq登录界面(界面实现)

    总的来说,这个项目提供了一个基础的Android QQ登录界面实现,通过学习和分析这个项目,初学者可以掌握Android布局设计、点击事件处理以及项目构建的基本流程,为今后的Android开发打下坚实的基础。

    Android简单登录界面设计

    // 弹出忘记密码提示或跳转到相应页面 } }); } private boolean isValidInput(String username, String password) { return !TextUtils.isEmpty(username) && !TextUtils.isEmpty(password); } private ...

    弹出层效果

    最后,为了让弹出层能够被触发,我们需要在页面上的某个元素添加触发弹出层的事件监听器,例如一个登录按钮: ```html &lt;button onclick="showPopup()"&gt;登录 ``` 这就是一个基本的JavaScript实现登录弹出层效果的...

    Android入门简单登录界面

    在Android开发中,创建一个简单的登录界面是学习过程中的...对于初学者来说,这个简单的登录界面是一个很好的起点,可以帮助理解Android UI设计和事件处理的基本原理。随着技能的提升,可以逐渐增加更多的功能和优化。

    自定义dialog弹出登录框

    总的来说,自定义Dialog弹出登录框涉及到了Android UI设计、事件监听、数据验证等多个方面,是Android开发中基础且重要的技能之一。通过以上步骤,开发者可以创建出符合自己应用风格的、具有完整功能的登录对话框。

    Login_delphi_ThisIsHow_源码

    5. **错误处理**:登录失败时,需要向用户提供反馈信息,如显示错误消息或弹出警告对话框。Delphi的TMessageDlg组件可以用来实现这一功能。 6. **状态管理**:“记住我”选项通常涉及使用Cookie或在本地存储用户...

    用户注册登录页面

    在构建一个用户注册登录页面的过程中,我们需要关注的关键...总的来说,构建用户注册登录页面涉及HTML、CSS和JavaScript的综合应用,通过这些技术,我们可以创建出既美观又功能完备的用户界面,提供良好的用户体验。

    js按钮弹出窗口远程调用淘宝网登陆页面.zip

    【标题】"js按钮弹出窗口远程调用淘宝网登陆页面.zip" 提供了一个使用JavaScript技术实现的功能,即通过点击按钮在弹出窗口中打开淘宝网的登录页面。这一技术在网页交互设计中常见,主要用于增强用户体验,比如提供...

    js+css弹出登陆框

    这个功能结合了JavaScript的动态交互能力和CSS的样式设计,使得登录框能够以弹出的方式出现,提高用户体验。下面我们将详细探讨如何实现这样的功能。 首先,我们需要一个基础的HTML结构来创建登录表单。在提供的`...

    android的一个登陆界面

    在Android开发中,一个登录界面是用户与应用交互的基础组件之一。它通常包含用户名和密码输入框、登录按钮,有时还会包含忘记密码、注册新账号等链接。在本例中,"android的一个登录界面"意味着你正在创建一个简单的...

    Android应用源码之QQ的登录界面 源代码.zip

    1. **布局文件**:登录界面的UI设计通常在XML布局文件中完成,如`activity_login.xml`。这个文件定义了界面元素的位置、大小、样式等,包括输入框(EditText)、按钮(Button)、图像视图(ImageView)等。开发者...

    div+css+js 实现透明屏蔽当前页面,并弹出新层进行操作。推荐哦

    ### div+css+js 实现透明屏蔽当前页面并弹出新层进行操作 #### 技术背景与原理 在Web开发领域,为了提供更优质的用户体验,开发者常常需要实现在不离开当前页面的情况下进行某些特定的操作,例如登录、注册或者...

    Android程序研发源码QQ的登录界面 源代码.zip

    - "登录"按钮可能是一个`Button`,通过设置`onClick`属性与Java代码中的事件处理函数关联。 4. **主题和样式**: - 为了实现与QQ应用类似的视觉效果,源码可能包含自定义主题和样式,这些在`styles.xml`文件中...

    login-modal-interface:登录模式界面布局

    登录模式界面,通常被称为弹出式登录窗口或模态对话框,是网页设计中常见的一种交互元素。这种界面布局在用户需要登录或者注册时出现,不会中断当前页面的浏览体验,而是以半透明背景和一个独立的输入框形式覆盖在主...

    登录、Radiobutton的简单使用

    RadioButtons则可能出现在题目展示页面,用于表示题目选项。开发者会根据具体的业务需求,编写适配这些UI元素的Java或Kotlin代码。 总的来说,这个小程序涵盖了Android开发的基础知识,包括用户界面设计、事件处理...

    JS 退出系统并跳转到登录界面的实现代码

    在JavaScript中,实现用户退出系统并跳转到登录界面的功能主要涉及到两个关键点:确认对话框和页面重定向。下面将详细解释这个过程。 首先,我们来看提供的JS代码: ```html function logout(){ // 确认对话框,...

    当点击登陆按钮时可以屏蔽主页面

    这种技术的主要目的是在用户进行登录操作时提供一个更好的交互体验,通过显示一个半透明的遮罩层或者弹出窗口来暂时阻止用户与主页面的互动,直到登录过程完成。下面我们将详细探讨这一技术实现的各个方面。 首先,...

    JS实现点击登录弹出窗口同时背景色渐变动画效果

    这个功能通常用于网页登录界面,当用户点击“登录”按钮时,弹出一个窗口,背景颜色逐渐变暗,形成一种聚焦的效果,引导用户注意力集中到登录表单上。 首先,我们需要在HTML中定义登录窗口的结构。例如,我们可以...

Global site tag (gtag.js) - Google Analytics