查看旧版所有文章

有风的日子,网页设计爱好者的家园

旧版

您现在访问的是有风的日子旧版!新版地址为:http://www.hellowind.com
有风的日子现已全面升级!新标识,新域名,新架构,新布局,新平台,不变的承诺——有风的日子,网页设计爱好者的家园
为网页设计、平面设计、多媒体设计及摄影爱好者提供资讯、博客、相册、论坛等多方位服务...

Flash MX 2004系列教程(二)UI组件-Date Field & Chooser Component

来源:BlogBus.com    发表于2004-2-23 10:18:51

关键字:Flash, 组件, Date

Flash MX 2004系列教程(二)UI组件-Date Chooser Component

  the Date Field 组件实际上真的和日期选择是一样的,它可以包含date chooser组件,只不过是多了一个弹出下拉的形式而已。

  1. 打开上例中我们做好的例子。

  2. 用Date Field组件替换Date Chooser组件。不过需要注意的是你不能在属性面板中使用交换符号的方式来替换,而只能通过手动的方式先删除在拖放一个。

  3. 将Date Field组的实例名也和上例一样取名为myDateChooser,同时你可能也发现在该组件面板上的属性也与Date Chooser是一样的。

  4. 对于程式中的代码你无需做任何修改,现在就测试你影片,它就可以工作了。:)

 

Flash MX 2004系列教程(二)UI组件-Date Chooser Component

  Date Chooser Component 组件在2004中只是在FLASHMX中中日历的新名字而已。使用起来也很简单。

  1. 新建一个新的文档。如下图所示的布局做为参考。

  2. 创建一个新层。最上层取命为action下层为componets。

  3. 将文本域拖到场景中将其放在上端。我们将用它来显示在日期选择组件中所选的组件。同时选中文本域在属性面板中为其命名为statusMessage。在text属性中输入如下文本:Select dates on the DateChooser component, below.

  4. 将日期选择组件拖至场景中并放在文本域的下方,在属性面板中为其取实例名为myDateChooser。然后我们来看一下在该组件中我们可以使用的变量有哪些,使用disableDays我们可以显示日期但用户不可以选择,通过firstdayofweek我们可以指定一个星期的第一天,0代表星期日,monthnames可以根据语言的种类指定月份的名称,showtoday是显示当前这一天。

  5. 在第一帧上输入如下代码:

myDateChooserListener=new Object();
myDateChooserListener.change=function(eventObj){
 var eventSource=eventObj.target;
 var theSelectedDate=eventSource.selectedDate;
 //创新显示信息。
 var msg="您选择的是" +theSelectedDate+"。";
//显示信息 
statusMessage.text=msg;
}
myDateChooser.addEventListener"change",myDateChooserListener);

  6. 测试影片,现在你就可以交互显示你的日期了。

  7. 可能显示的结果不是你想要的,只要将日期格式化一下就可以得到我们想要的结果了。将上面的代码修改为:

myDateChooserListener=new Object();
myDateChooserListener.change=function(eventObj){
 var eventSource=eventObj.target;
 var theSelectedDate=eventSource.selectedDate;
 //格式化日期
 var theDate=theSelectedDate.getDate();
 var theMonth=theSelectedDate.getMonth()+1;
 var theYear=theSelectedDate.getFullYear();
 //创建显示信息
 var msg="您选择的是" +theMonth +"月"+theDate+"日"+theYear+"年";
//显示信息 
statusMessage.text=msg;
}
myDateChooser.addEventListener"change",myDateChooserListener);

  8. 再次测试影片。