How can I do auto-open tab?

How-to Discussions
1

Hi,

I want auto-open tab with JS. How can I do it?

<App Background="#333">    

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

        var activeTab = Observable("page3"); // start app default to go page3

        module.exports = { activeTab: activeTab }
    </JavaScript>

    <DockPanel>
        <StatusBarBackground Dock="Top"/>
        <BottomBarBackground Dock="Bottom"/>

        <WhileInactive>
            <Set Target="pages.Active" Value="{activeTab}" />
        </WhileInactive>
        <WhileActive>
            <Set Target="pages.Active" Value="{activeTab}" />
        </WhileActive>

        <PageControl ux:Name="pages">
            <Page ux:Name="page1" Background="#34495e">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage1" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page2" Background="#3498db">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage2" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page3" Background="#aa3377">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage3" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page4" Background="#88cc22">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage4" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
        </PageControl>

        <Grid ColumnData="1*,1*,1*,1*" Height="45" Dock="Bottom">
            <Image ux:Class="Icon" Margin="10" />
            <Panel Background="#34495e">
                <Icon ux:Name="tabBarImage1" File="Assets/icon-hexagon.png" />
                <Clicked>
                    <Set pages.Active="page1" />
                </Clicked>
            </Panel>
            <Panel Background="#3498db">
                <Icon ux:Name="tabBarImage2" File="Assets/icon-star.png" />
                <Clicked>
                    <Set pages.Active="page2" />
                </Clicked>
            </Panel>
            <Panel Background="#aa3377">
                <Icon ux:Name="tabBarImage3" File="Assets/icon-square.png" />
                <Clicked>
                    <Set pages.Active="page3" />
                </Clicked>
            </Panel>
            <Panel Background="#88cc22">
                <Icon ux:Name="tabBarImage4" File="Assets/icon-triangle.png" />
                <Clicked>
                    <Set pages.Active="page4" />
                </Clicked>
            </Panel>
        </Grid>
    </DockPanel>
</App>
2

Set the PageControl's Active property to {activeTab}:

<PageControl Active="{activeTab}">`
3

Edwin Reynoso wrote:

Set the PageControl’s Active property to {activeTab}:

<PageControl Active="{activeTab}">`


<PageControl ux:Name="pages" Active="{activeTab}">

```

Thank you.