Air Asia – Fooling around with forms

The challange today is to recreate the Air Asia native App style on a jQuery mobile default template. Three pages have been chosen to be imitated the Air Asia home page, menu page and the online check in.

I used the open source script for the popular and mobile friendly FlexSlider courtesy of woo themes to create the homepage. I’ve used this slider a lot in creating mobile pages, sites and web apps – it really is completely flexible.

In this article I’m going to focus on styling the online check in page, more precisly fooling around with the form elements. The Air Asia page has the label for a form element appear to be a part of the button selection.

First we change the font to the right color and size, then we get the actual element ready to have the labels moved, by giving it an 80px indent using the padding-left attribute.

.airasia label.ui-select,.airasia .ui-controlgroup-label
{
  color:#ea0b14;
  font-weight:900;
}

.airasia .ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn
{
  text-align:left;
  padding-left:80px;
}

 
Next we are going to move the labels across to the left hand side by making their position: relative and placing them 2px from the top and left margins, creating the effect of a border. The background-color of the label element is usually transparent here we are changing it to #eee to match the light grey of the Air Asia App.

.airasia .labels
{
  width:80px;
  background-color:#eee;
  position:relative;
  top:2px;
  left:2px;
  margin-top:-2px;
  z-index:9;
  padding:8px 0 8px 8px;
}

 
Make sure the z-index is set high enough that the labels sit on top of all over content in this case that is 9, if you are unsure you can always set it to an extreamly high number such as z-index: 9999.

.airasia .ui-btn-active
{
  text-shadow:none;
  background-image:none;
  border:solid 1px #ea0b14;
  background-color:#ea0b14;
  color:#fff;
  font-weight:800;
}

 
The jQuery built in form elements are easy to use and manipulate for any purpose, combined with your smartphones operating system they work like a dream and look very slick.

For a tutorial on creating a back button similar to that of the Air Asia App visit: http://appcropolis.com/how-to-make-iphone-back-button-in-jquery-mobile/