Flex中通過(guò)RadioButton進(jìn)行切換示例代碼
更新時(shí)間:2014年02月08日 17:22:41 作者:
這篇文章主要介紹了Flex中通過(guò)RadioButton進(jìn)行切換示例代碼,需要的朋友可以參考下
1、頁(yè)面切換
<?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"
width="100%" height="100%">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 將非可視元素(例如服務(wù)、值對(duì)象)放在此處 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
/**
* 圖的數(shù)據(jù)源綁定
*/
[Bindable]
private var chartArray:ArrayCollection = new ArrayCollection([
{week:"星期一",apple:"451245",orange:"894544",peach:"451245"},
{week:"星期二",apple:"985444",orange:"745445",peach:"989565"},
{week:"星期三",apple:"124544",orange:"323565",peach:"323121"},
{week:"星期四",apple:"895645",orange:"201212",peach:"542121"},
{week:"星期五",apple:"325645",orange:"564545",peach:"656454"},
{week:"星期六",apple:"564512",orange:"784545",peach:"845455"},
{week:"星期日",apple:"784545",orange:"656232",peach:"124545"}
]);
/**
* RadioButton 點(diǎn)擊事件
*/
protected function clickHandler(event:Event):void
{
if(radio_column.enabled)
{
column.height = 450;
line.height = 0;
}
else if(radio_line.enabled)
{
column.height = 0;
line.height = 450;
}
}
]]>
</fx:Script>
<mx:VBox id="vbox" width="100%" height="100%">
<mx:VBox id="column_chart" width="100%" height="80%" paddingLeft="10" paddingRight="10"
paddingTop="10">
<mx:ColumnChart id="column" showDataTips="true" dataProvider="{chartArray}" width="100%" height="450">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="week" displayName="星期"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName="蘋果" xField="week" yField="apple"/>
<mx:ColumnSeries displayName="橘子" xField="week" yField="orange"/>
<mx:ColumnSeries displayName="桃子" xField="week" yField="peach"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
</mx:VBox>
<mx:VBox id="line_chart" width="100%" height="0" paddingLeft="10" paddingRight="10"
paddingTop="10">
<mx:LineChart id="line" showDataTips="true" dataProvider="{chartArray}" width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="week" displayName="星期"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries displayName="蘋果" xField="week" yField="apple"/>
<mx:LineSeries displayName="橘子" xField="week" yField="orange"/>
<mx:LineSeries displayName="桃子" xField="week" yField="peach"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{line}"/>
</mx:VBox>
<mx:HBox width="100%" height="30">
<mx:RadioButton id="radio_column" name="chart" label="柱形圖" click="clickHandler(event)"/>
<mx:RadioButton id="radio_line" name="chart" label="折線圖" change="clickHandler(event)"/>
</mx:HBox>
</mx:VBox>
</s:Application>
2、頁(yè)面結(jié)果
復(fù)制代碼 代碼如下:
<?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"
width="100%" height="100%">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 將非可視元素(例如服務(wù)、值對(duì)象)放在此處 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
/**
* 圖的數(shù)據(jù)源綁定
*/
[Bindable]
private var chartArray:ArrayCollection = new ArrayCollection([
{week:"星期一",apple:"451245",orange:"894544",peach:"451245"},
{week:"星期二",apple:"985444",orange:"745445",peach:"989565"},
{week:"星期三",apple:"124544",orange:"323565",peach:"323121"},
{week:"星期四",apple:"895645",orange:"201212",peach:"542121"},
{week:"星期五",apple:"325645",orange:"564545",peach:"656454"},
{week:"星期六",apple:"564512",orange:"784545",peach:"845455"},
{week:"星期日",apple:"784545",orange:"656232",peach:"124545"}
]);
/**
* RadioButton 點(diǎn)擊事件
*/
protected function clickHandler(event:Event):void
{
if(radio_column.enabled)
{
column.height = 450;
line.height = 0;
}
else if(radio_line.enabled)
{
column.height = 0;
line.height = 450;
}
}
]]>
</fx:Script>
<mx:VBox id="vbox" width="100%" height="100%">
<mx:VBox id="column_chart" width="100%" height="80%" paddingLeft="10" paddingRight="10"
paddingTop="10">
<mx:ColumnChart id="column" showDataTips="true" dataProvider="{chartArray}" width="100%" height="450">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="week" displayName="星期"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName="蘋果" xField="week" yField="apple"/>
<mx:ColumnSeries displayName="橘子" xField="week" yField="orange"/>
<mx:ColumnSeries displayName="桃子" xField="week" yField="peach"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
</mx:VBox>
<mx:VBox id="line_chart" width="100%" height="0" paddingLeft="10" paddingRight="10"
paddingTop="10">
<mx:LineChart id="line" showDataTips="true" dataProvider="{chartArray}" width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="week" displayName="星期"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries displayName="蘋果" xField="week" yField="apple"/>
<mx:LineSeries displayName="橘子" xField="week" yField="orange"/>
<mx:LineSeries displayName="桃子" xField="week" yField="peach"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{line}"/>
</mx:VBox>
<mx:HBox width="100%" height="30">
<mx:RadioButton id="radio_column" name="chart" label="柱形圖" click="clickHandler(event)"/>
<mx:RadioButton id="radio_line" name="chart" label="折線圖" change="clickHandler(event)"/>
</mx:HBox>
</mx:VBox>
</s:Application>
2、頁(yè)面結(jié)果

您可能感興趣的文章:
- 原生js與jQuery實(shí)現(xiàn)簡(jiǎn)單的tab切換特效對(duì)比
- jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換
- JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js實(shí)現(xiàn)簡(jiǎn)單的可切換選項(xiàng)卡效果
- JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法
- js實(shí)現(xiàn)橫向百葉窗效果網(wǎng)頁(yè)切換動(dòng)畫效果的方法
- JS實(shí)現(xiàn)點(diǎn)擊顏色塊切換指定區(qū)域背景顏色的方法
- js實(shí)現(xiàn)表單Radio切換效果的方法
相關(guān)文章
Flex 基于數(shù)據(jù)源的Menu Tree實(shí)現(xiàn)代碼
由外部參數(shù)flashvars指定數(shù)據(jù)源的文件位置或render鏈接,在源數(shù)據(jù)上加href和target屬性來(lái)控制打開窗口,可自定義父節(jié)點(diǎn)和子節(jié)點(diǎn)圖標(biāo),不設(shè)置采用系統(tǒng)默認(rèn),感興趣的你可以了解下啊,或許對(duì)你有所幫助2013-01-01Flex DataGrid 偽合并單元格實(shí)現(xiàn)思路
本節(jié)主要介紹了Flex DataGrid 偽合并單元格實(shí)現(xiàn)思路,需要的朋友可以參考下2014-07-07在as中監(jiān)聽自定義事件并處理事件的實(shí)例代碼
點(diǎn)擊一張圖片,響應(yīng)事件。必須在AS中,去監(jiān)聽事件,并處理事件,下面是具體的實(shí)現(xiàn)思路及功能代碼,感興趣的朋友可以參考下哈2013-06-06Flex設(shè)置LinkButton的背景色有思路有源碼
Flex中沒(méi)有設(shè)置LinkButton的背景色的屬性,可以直接通過(guò)調(diào)用樣式方法畫出LinkButton的背景色2014-08-08flex4 panel去掉標(biāo)題設(shè)置透明度效果代碼
首先:去掉Panel的標(biāo)題,其次:設(shè)置透明度這個(gè)說(shuō)了也是啰嗦,大家都會(huì),不過(guò)還是提一下吧,具體請(qǐng)祥看本文2013-05-05flex實(shí)現(xiàn)股票行情走勢(shì)圖示例代碼
股票行情走勢(shì)圖在flex中也可以實(shí)現(xiàn)了,具體步驟及代碼如下,感興趣的朋友可以參考下,或許有所幫助2013-10-10flex內(nèi)嵌html網(wǎng)頁(yè)示例代碼
這篇文章主要介紹了flex如何內(nèi)嵌html網(wǎng)頁(yè),需要的朋友可以參考下2014-05-05js調(diào)用Flex中的方法并向flex中傳參及flex調(diào)用js示例
本文為大家詳細(xì)介紹喜愛js調(diào)用Flex中的方法以及向flex中傳參與flex調(diào)用js,具體示例如下,感興趣的朋友不妨參考下,希望對(duì)大家有所幫助2013-07-07