In order to get up and running as quickly as possible with jQueryMobile, we're going to copy the Single Page template. Note: In order to simplify this example, I'm adding the single page template HTML directly to the WCF project. I would normally use a multi-page template and separate the UI from the services in a production project and I suggest you do the same.
With that said, create a new html document in your project's root named index.html. Navigate to the Single Page Template, view the source, copy it, and paste it over the contents of the index.html document. Congratulations, you've just integrated jQueryMobile with your project. Now you just need to request and receive data from your service.
The template is broken into a header, content, and a footer section. All of the scripts are loaded from a remote server so you don't need to download anything into your project at this time. Start by removing the paragraph elements within the content section. Add a unordered list element with a data-role of listview. jQueryMobile will handle the styling of this list to make it look like your standard iOS tableview component. We're also going to add a hidden listitem element with an id of categoryTemplate.
What we end up with looks like the following. Note that there's also a reference to a category.js file. Create a blank file with that name for now.
Finally, we use the data returned by the service. Recall the structure from the previous post, the object name is GetProductCategoriesResult, so we iterate over the contents of that object, creating a clone of the template node and replacing its text. Finally, we call the listview(refresh) to ensure that jQueryMobile styles the content appropriately.