WebSharper bindings for JQuery Mobile
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Backup/IntelliFactory.WebSharper.JQuery.Mobile Update license info Oct 4, 2018
WebSharper.JQuery.Mobile.StandaloneTest Add explicit FSharp.Core reference Oct 4, 2018
WebSharper.JQuery.Mobile Add explicit FSharp.Core reference Oct 4, 2018
nuget Compile for net461 separately Feb 16, 2018
.hgignore Fix if-build based compilation. Aug 23, 2013
README.md Update README Mar 18, 2015
build.fsx Get common buils scripts from build-script repo Jan 29, 2018
build.sh Update license info Oct 4, 2018



This extension provides WebSharper bindings to the jQuery Mobile library, version 1.3.1, that provides support for mobile web development. The library targets any of the following platforms:

  • iOS
  • Android
  • BlackBerry
  • Bada
  • Windows Phone
  • Palm Web OS
  • Symbian
  • Meego

Creating Pages

JQuery Mobile uses the data-* Html5 attributes to mark each of the elements in the page. It automatically adds CSS classes in order to make them more suitable for mobile development.

One of the most important data attributes is the "role" attribute. The following values are used commonly

  • page: Create pseudo-pages in the same page. This avoids long refreshing times.
  • header: Top part of the page.
  • content: Middle part of the page.
  • footer: Bottom of the page.
  • button: Transforms a link into a button that is easier to target in a touch based application.
  • collapsible: A collapsible element that can be minimized in order to save space

Writing a simple page can be done by simply setting this attributes in the page.

First, some helpers to set the custom attributes to an element:

open WebSharper.JQuery

let SetAttr attr value elem =
    |>! OnAfterRender (fun elem ->
        JQuery.Of(elem.Body).Attr(attr, value).Ignore)

let AddDataRole role elem = SetAttr "data-role" role elem

Then it is a matter of adding the right attributes to each of the parts of the website. Since JQuery Mobile works automatically, it is sometimes better to make sure the resource is added to the page. The dummy UseJQueryMobile will force the static analyzer to add the reference of the JQuery Mobile extension.

open WebSharper.JQuery
open WebSharper.JQuery.Mobile

let SimplePage () = 
    Mobile.Use() // triggers webresource.
    let header =
        Div [H1 [Text "Page Title"]]
        |> AddDataRole "header"

    let content =
        Div [P [Text "Lorem ipsum dolor sit amet, consectetur adipiscing"]]
        |> AddDataRole "content"

    let footer =
        Div [H4 [Text "Page Footer"]]
        |> AddDataRole "footer"

    let page = 
        Div [header
        |> AddDataRole "page"


Using the jQuery Mobile object

JQuery also exposes some additional events and configuration properties documented in their website. To get access, build the jQuery object under the Mobile namespace. Is possible to build it from any jQuery object as it's shown in the following example:

Mobile.Events.Tap.On(JQuery.Of(header.Body), fun event -> 
    JS.Alert("Tapped on: " + string event.PageX + "," + string event.PageY)

Configuration properties and utilities

They jQuery Mobile also provides different utilities and configuration values. These are available under the Mobile.Instance property. For example:

open WebSharper.JQuery.Mobile