Introduction

Since I'm on vacation and I have nothing better to do I decided to make a mobile version of our blogs. Not only because it's fashionable but also because old people will have a hard time reading this site on a smartphone and to save bandwidth in bandwidth deprived countries like Belgium (250MB/month costs 10€). So I set about and read some things about jQuery Mobile. They are up to alpha 4 already so I expect a few betas soon. There are lots of demos and good documentation on their site. Not all OSS have bad documentation.
I have not yet put the site up but I will set it up this week for everyone to test.

The index

First I needed to create an index page which would show the tittle of the latest blogposts. This is what it looks like on an iphone emulator.

First thing to know is that you add the jQuery and jQuery Mobile references and that it uses HTML 5 to do it's magic.

I used the latest unstable release here, I might change that in the future when they do release.

Then I used a page.You simply define it like this.

The data-role tag tells it this is a pag and the data-theme let's you choose from 5 themes already there but you can make your own if you so desire.

Then we define a header.

Again we use data-role of type header this time.

After that you have the content data-role to add your...content. And I added a title.

After that it was time to add the items. I choose a collapsible set.

Which gave me the possibility to add excerpts to it and a more button to open the post.

The list and individual items would look something like this.

I guess by now you can see what it is doing.

I also added a footer for paging on the page.

Which looks something like this.

And here is the code.

Look at how you can easily add the icons to it.

Then I made something similar to show the post.

The code for that is pretty much the same. as the above.

Conclusion

Working with jQuery Mobile is pretty simple and documentation is very good. The only thing to do now is to resize the images so that they fit better on the little screen.