jQuery Mobile 1.0 RC1 released

The future is mobile.

At the Microsoft conference Build last month, ASP.NET MVC 4 was announced and with it the jQuery Mobile Framework. Since a few days jQuery Mobile 1.0 RC1 is released. But what is jQuery Mobile?

There Website tells us:
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

So let's see what it does and how it can be used. I build a small demo web application with ASP.NET MVC 4. Based on the AdventureWorks database and the vendor table I got a form that looks in the Windows Phone emulator like that.

Looks not too bad but not really phone like. Via NuGet I install jQuery.Mobile.MVC which is based on jQuery.Mobile. After the installation I already have a new design because of the new MasterPage that was installed with the package. The site looks like:

Much better already. But where does this changes come from? If we take a look at the new mobile MasterPage we'll find the following code: 

In this code snippet we see two new attributes (data-role and data-theme) which belong to jQuery Mobile and they are the reason for the new formatting.

If we like to format the Create New link on top of the side, so it will be a touchable button instead of the normal link, it's that simple. Just add the attribute data-role="button" and if you also like an image next to it data-icon="plus". After that small change it looks like:

Pretty easy, isn't it. There are a lot more functionality and design stuff in jQuery Mobile. Check out there website and attend my session at TechDays in Bern.