用Flex模拟智能手机表单输入的自动放大功能
2011-04-06 21:03
781 查看
用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次缩小到正常状态。
在flex开发过程中,有时也会遇到一些输入项很多的表单,可以借鉴iphone上的这种体验,基本思路就是:将整个容器放大,以适应屏幕,然后将获得焦点的文本框定位到屏幕中央。
下面是演示:
当UserName与PassWord文本框获得焦点时,表单(其实就是panel)会自动放大,并重新定位,最终将获得焦点的文本框定位在屏幕中央,以方便输入。点击checkbox或login按钮时,会恢复正常大小。
主要代码:
在flex开发过程中,有时也会遇到一些输入项很多的表单,可以借鉴iphone上的这种体验,基本思路就是:将整个容器放大,以适应屏幕,然后将获得焦点的文本框定位到屏幕中央。
下面是演示:
当UserName与PassWord文本框获得焦点时,表单(其实就是panel)会自动放大,并重新定位,最终将获得焦点的文本框定位在屏幕中央,以方便输入。点击checkbox或login按钮时,会恢复正常大小。
主要代码:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="windowedapplication1_applicationCompleteHandler(event)" width="640" height="480" > <fx:Script> <![CDATA[ import gs.TweenLite; import mx.events.FlexEvent; private var SW:Number;//舞台的宽度 private var SH:Number;//舞台的高度 private var WH:Number;//panel的高度 private var WW:Number;//panel的宽度 protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void { SW = stage.stageWidth; SH = stage.stageHeight; WW = loginWin.width; WH = loginWin.height; initPosAnsScale(); } private function initPosAnsScale():void { TweenLite.to(loginWin,0.2,{x:0.5*(SW - WW),y:0.5*(SH - WH),scaleX:1,scaleY:1}); } protected override function focusInHandler(e:FocusEvent):void { var radioX:Number = SW/WW; var radioY:Number = SH/WH; var radio:Number = Math.min(radioX,radioY); //注:e.target得到的对象类似于: //HelloWorld0.WindowedApplicationSkin2.Group3.contentGroup.loginWin. //PanelSkin8._PanelSkin_Group1.contents.contentGroup. //txtName.TextInputSkin21.textDisplay trace(e.target); //所以这里要连用3次parent才能得到正确的文件框(txtName)对象 var current:DisplayObject = e.target.parent.parent as DisplayObject; //当前焦点对应文本框在舞台上的实际位置 var _nX:Number = current.x * radio + loginWin.x; var _nY:Number = current.y * radio + loginWin.y + loginWin.titleDisplay.height*radio; //当前焦点对应的文本框中心点的实际位置 var _cX:Number = _nX + 0.5*e.target.width*radio; var _cY:Number = _nY + 0.5*e.target.height*radio; //计算要移动的距离 var _dx:Number = _cX - 0.5*SW; var _dy:Number = _cY - 0.5*SH; //缩放+移动 var desX:Number = loginWin.x - _dx; var desY:Number = loginWin.y - _dy; TweenLite.to(loginWin,0.2,{scaleX:radio,scaleY:radio,x:desX,y:desY}); } protected override function focusOutHandler(e:FocusEvent):void { initPosAnsScale(); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Panel title="Please Login" id="loginWin" dropShadowVisible="false" width="330" x="139" height="219" y="94"> <s:layout> <s:BasicLayout/> </s:layout> <s:Label x="129" y="10" text="UserName"/> <s:TextInput x="96" y="30" id="txtName" focusIn="focusInHandler(event)" focusOut="focusOutHandler(event)"/> <s:Label x="131.5" y="65" text="Password"/> <s:TextInput x="96" y="85" id="txtPwd" displayAsPassword="true" focusIn="focusInHandler(event)" focusOut="focusOutHandler(event)"/> <s:Button x="125" y="148" label="login"/> <s:CheckBox x="113" y="118" label="Remember me" click="focusOutHandler(null)"/> </s:Panel> </s:Application>
相关文章推荐
- 【输入智能提示功能】PHP+jQuery实现自动补全功能
- winform模拟qq聊天界面的小功能textbox1输入自动跳到textbox2
- Python模拟百度自动输入搜索功能
- 【输入智能提示功能】PHP+jQuery实现自动补全功能
- Flex中如何实现类似像QQ登录框中那种“记住密码”、“自动登录”功能,还有如何实现文本框中记录最后一次输入的值?
- winform模拟qq聊天界面的小功能textbox1输入自动跳到textbox2
- Angular4实现动态添加删除表单输入框功能
- 图片自动放大缩小,模拟”心脏跳动”
- 网页自动转发提交表单功能
- 用AJAX实现google输入自动完成的简单模拟
- Shell脚本中调用expect,实现自动输入密码的功能
- 防止手机浏览点击输入框自动放大
- 使用jquery 实现 仿google 的智能提示输入框功能
- thinkphp 表单自动验证功能
- 模拟键盘按键 自动输入文字
- Eclipse for android 实现代码自动提示智能提示功能
- flex中文本自动换行功能。WordWrap
- 输入自动提示搜索提示功能(使用说明:sugggestion.txt)
- jquery 实现邮箱输入自动提示功能:(一)
- 模拟键盘按键 自动输入文字 (转载)