jQuery UI
Back to Questions
551
views 2
comments
jQuery UI
websharper jquery

Can you guys please show me an example of adding an accordion in jQuery UI? Thanks in advance.

.

The following should give you a simple accordion. Use the Single Page Application project template and update Client.fs as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

namespace SinglePageApplication1

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQueryUI

[<JavaScript>]
module Client =

    let Main =
        Accordion.New [
            "Tab 1", Div [P [Text "content1"]]
            "Tab 2", Div [P [Text "content2"]]
        ]
        |> fun main ->
            main.AppendTo("placeholder")

This uses a custom placeholder node, so be sure to add that to your index.html, before the generated <script> include, as this:

1
2
3
4
5

<body>
    <div id="placeholder" />
    <script type="text/javascript" src="Content/SinglePageApplication1.min.js"></script>
</body>
...

When you run this SPA, you should see something like this:

Result

Hope this helps.

By on 11/24/2014 6:08 PM ()

... and be sure to add a NuGet reference to WebSharper.JQueryUI to your project (and update WebSharper to the latest, if necessary) to get the IntelliFactory.WebSharper.JQueryUI namespace to show up.

By on 11/24/2014 6:14 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2024 IntelliFactory. All rights reserved.
    | | | Trainings | | |     		Built with