WebSharper : How to create a menu with jQueryUI

Question

I would like to use JQueryUI provide by WebSharper in order to create a menu.

I see on JQueryUI website, that we need a list of ul and li to make it.

So i create the following code in WebSharper.

let Menu = 
    let atr = Attr.NewAttr("test")
    let el2 = 
        Div [
            Text "menu1"
            Text "menu2"
         ]

    let menuId = "menu"

    let el =
        UL [
            LI [
                Text "menu1"
                UL [
                    LI [Text "sub-menu1"]
                ] :> IPagelet
            ]
            LI [Text "menu2"]
        ]

    let menuJS = Menu.New(el)

    Div [menuJS ]

let Main () =
    Div [
        H1 [Text "Titre 1"]
        Menu
    ]

This allow me to create a basic structure of ul and li. And after, that i use it to create the menu.

But i can't obtain the sub-menu. And more over, I don't know how to interact with the menu, like catching select element, etc.

I find no documentation about menu with JQueryUI on the WebSharper samples. Can you please help me understand how to use it ?

Answer 1

There seems to be some incompatibility between jQuery 1.11 and jQuery UI 1.10, which are the versions linked by WebSharper.

I just updated WebSharper.JQueryUI to reference jQuery UI 1.11, so updating the NuGet package to the latest (2.5.7.186) will make this work.