Fuse短板之如何实现各类表单元素及组件（二）

上一篇我们实现了表单元素复选框Checkbox，今天我们实现单选按钮Radio Button效果吧！

效果图如下：

radio

主要代码如下：

<pre>
<JavaScript>
var Observable = require('FuseJS/Observable');

    var options = Observable();
    options.add({option: "option 1", visibility: "Hidden"});
    options.add({option: "option 2", visibility: "Hidden"});
    options.add({option: "option 3", visibility: "Hidden"});
    options.add({option: "option 4", visibility: "Visible"});


    function myHandler(args) {

        for (var item in options["_values"]) {

            if(args.message == options["_values"][item]["option"].toString()){

                var index = options.indexOf(options["_values"][item]);
                var item = {option: options["_values"][item]["option"].toString() , visibility: "Visible"};
                options.replaceAt(index, item);
             }
             else {
                 var index = options.indexOf(options["_values"][item]);
                var item = {option: options["_values"][item]["option"].toString() , visibility: "Hidden"};
                options.replaceAt(index, item);
             }
        }


    }

    module.exports = {
        options : options,
        myHandler:myHandler
    }
</JavaScript>

<StackPanel Background="#FFF" Margin="30" ItemSpacing="7">
    <Each Items="{options}">
        <StackPanel Background="#FFF" Margin="5">
            <Match Value="{visibility}">
                <Case String="Hidden">
                    <HiddenRadioButton Text="{option}"/>
                </Case>
                <Case String="Visible">
                    <VisibleRadioButton Text="{option}"/>
                </Case>
            </Match>
        </StackPanel>
    </Each>
</StackPanel>

<StackPanel ux:Class="HiddenRadioButton" ux:Name="self" Orientation="Horizontal" ItemSpacing="5">
    <string ux:Property="Text" />

    <UserEvent Name="ClickingEvent"/>
    <OnUserEvent Name="ClickingEvent" Handler="{myHandler}" />

    <Circle Width="25" Height="25" Color="#FFF">
        <DropShadow />
        <Circle ux:Name="SmallCircle" Width="15" Height="20" Color="#000" Visibility="Hidden" Alignment="Center"/>
    </Circle>
    <Text ux:Name="option_text" TextColor="#000" FontSize="20" Value="{Property self.Text}" Alignment="VerticalCenter"/> 

    <Clicked>
        <RaiseUserEvent Name="ClickingEvent">
                <UserEventArg Name="message" StringValue="{Property self.Text}" />
        </RaiseUserEvent>
    </Clicked>
</StackPanel>

<StackPanel ux:Class="VisibleRadioButton" ux:Name="self" Orientation="Horizontal" ItemSpacing="5">
    <string ux:Property="Text" />

    <UserEvent Name="ClickingEvent"/>
    <OnUserEvent Name="ClickingEvent" Handler="{myHandler}" />

    <Circle Width="25" Height="25" Color="#FFF">
        <DropShadow />
        <Circle ux:Name="SmallCircle" Width="15" Height="20" Color="#000" Visibility="Visible"  Alignment="Center"/>
    </Circle>
    <Text ux:Name="option_text" TextColor="#000" FontSize="20" Value="{Property self.Text}" Alignment="VerticalCenter"/> 

    <Clicked>
        <RaiseUserEvent Name="ClickingEvent">
                <UserEventArg Name="message" StringValue="{Property self.Text}" />
        </RaiseUserEvent>
    </Clicked>
</StackPanel>

</pre>

Tag：Fuse表单组件
发布时间：2016年05月23日
博客被黑，挪窝简书安家……