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:
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:
TechDays in Bern.