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

Answer 1

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.

Answer 2

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

Answer 3

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

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.