Flex中如何通过嵌入字体和各种样式创建一个自定义风格的DateChooser控件的例子

By Minidxer | November 9, 2008

接下来的例子演示了Flex中如何通过嵌入字体和各种样式，创建一个自定义风格的DateChooser控件。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         @font-face {
  9.             src: local("Base 02");
  10.             fontFamily: Base02Embedded;
  11.             unicode-range:
  12.                 U+0030-U+0039, /* 0-9 */
  13.                 U+0041-U+0051, /* Uppercase A-Z */
  14.                 U+0052-U+007A, /* Lowercase a-z */
  15.                 U+002F-U+002F; /* slash (/) */
  16.         }
  17.  
  18.         DateChooser {
  19.             cornerRadius: 0; /* pixels */
  20.             headerColors: black, black;
  21.             borderColor: black;
  22.             themeColor: black;
  23.             fontFamily: Base02Embedded;
  24.             todayColor: red;
  25.             todayStyleName: myTodayStyleName;
  26.             headerStyleName: myHeaderStyleName;
  27.             weekDayStyleName: myWeekDayStyleName;
  28.             dropShadowEnabled: true;
  29.         }
  30.  
  31.         .myTodayStyleName {
  32.             color: white;
  33.         }
  34.  
  35.         .myWeekDayStyleName {
  36.             fontWeight: normal;
  37.         }
  38.  
  39.         .myHeaderStyleName {
  40.             color: red;
  41.             fontSize: 16;
  42.             fontWeight: normal;
  43.         }
  44.     </mx:Style>
  45.  
  46.     <mx:Script>
  47.         <![CDATA[
  48.             import mx.formatters.DateBase;
  49.  
  50.             private function dateChooser_init():void {
  51.                 dateChooser.dayNames = DateBase.dayNamesShort;
  52.             }
  53.         ]]>
  54.     </mx:Script>
  55.  
  56.     <mx:DateChooser id="dateChooser"
  57.             initialize="dateChooser_init();" />
  58.  
  59. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DateChooser | No Comments » | 671 views Tags: , , , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll