locked
Html-JavaScript - Need help with FlipView

    Question

  • Hi,

    I am working on creating a Windows 8.1 app using HTML and JavaScript for the
    first time. I am trying to achieve the following:

    1.     Have a main page with a FlipView control.
    2.     Each item in the FlipView control to host a "PageControlNavigator".
    3.     Each PageControlNavigator showing different html pages in my project.

    I am unable to find a sample how we could achieve the above. I know that if I
    were to use XAML + c#, I could define the items in a FlipView as follows:

              <FlipView>

                <FlipViewItem>

                    <Image
    Source="/Assets/Logo.scale-100.png"></Image>

                </FlipViewItem>

                <FlipViewItem>

                    <Image
    Source="/Assets/SmallLogo.scale-100.png"></Image>

                </FlipViewItem>

            </FlipView>

    Is it possible to achieve something like this in HTML-JavaScript.

    Any help is appreciated.

    Thanks

    Gurpreet Singh
    Tuesday, November 26, 2013 3:25 PM

Answers

  • Hi Gurpreet,

    I misunderstand you in my last post, and sorry, FlipView control in WinJS can only work like that way.

    Can I understand that you have a FlipView in home.html and wants to click the FlipView item link to navigate to page2.html as the image shows below

    Navigating to page2.html the recommended way.

    It works as same as outside FlipView. ref: http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

    In your FlipView dataSource, put the page url inside, binding to the "href" as the target, while you clicking the item, fire the page navigation event:

    WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

    function linkClickEventHandler(eventInfo) { eventInfo.preventDefault(); var link = eventInfo.target; WinJS.Navigation.navigate(link.href); }

    Hope this can help you.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, November 27, 2013 6:34 AM
    Moderator

All replies

  • Hi singhguru87,

    Yes, Why not, FlipView is also a WinJS control, read the document should help you: FlipView object and Quickstart: Adding a FlipView.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, November 27, 2013 1:27 AM
    Moderator
  • Hi James,

    Appreciate you response.

    I have looked at the samples and the documentation for flipview for javascript. All are based on templates. By referring to XAML in the above description, I wanted to see if there is a way to specify flipview items without using templates in HTML. This is possible in XAML but I am not sure of HTML.

    If not, Is there a way to get a flipview with 2 items which are of the type "PageControlNavigator". PageControlNavigator points to html pages in my project.

    Thanks

    Gurpreet Singh

    Wednesday, November 27, 2013 4:09 AM
  • Hi Gurpreet,

    I misunderstand you in my last post, and sorry, FlipView control in WinJS can only work like that way.

    Can I understand that you have a FlipView in home.html and wants to click the FlipView item link to navigate to page2.html as the image shows below

    Navigating to page2.html the recommended way.

    It works as same as outside FlipView. ref: http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

    In your FlipView dataSource, put the page url inside, binding to the "href" as the target, while you clicking the item, fire the page navigation event:

    WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

    function linkClickEventHandler(eventInfo) { eventInfo.preventDefault(); var link = eventInfo.target; WinJS.Navigation.navigate(link.href); }

    Hope this can help you.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, November 27, 2013 6:34 AM
    Moderator