Create sample jquery mobile page for login screen


Here i would like to explain the procedure of creating different jquery mobile Login Page themes with validations by using jquery mobile. First have a look on concept of jquery mobile then you will discuss on themes and procedure of applying validations.



What is Jquery Mobile..?


Jquery Mobile is a HTML5 based user interface for all popular mobile devices platforms. its built on top of jQuery, the most popular JavaScript library used today. The framework is compatible with all major mobile and desktop applications including Android, Blackberry, Palm WebOS,iOS, Nokia/Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers. Jquery mobile have a lot features to explain but now we are planning to explain about themes.Later we will try to expand the posts which covers all the jquery mobile features.

Phonegap Tutorial series For Beginner's

Tutorial 1:
1. Introduction to Phonegap with Hello World

2. Get all the versions of Phone gap Plugins with Features

3: Introduction to Jquery mobile with different login forms

4: Store data in local database using PhoneGap (In Process..)

5: Sample Login page using Jquery Mobile and Phonegap (In Process..)



Different Login themes using Jquery Mobile

When we are planning to design any layout for mobile platforms.We need to concentrate on Device screen resolutions because there is a lot of difference between smartphones,Tablets and etc..
Here we are creating a sample login page with different themes i hope this will be useful to the beginners.Lets start

First ,Open a new normal html page

Next,Add the following Jquery Resources in between the head tags


  
 
 

Next,Add 2 Labels,2 Textboxes and 2 Buttons in between the body tags

For Theme-1:

Add the following code in body tag


jquery_mobile_page


Home

Developers Code

Login Page



For Theme-2 :



Jquery Mobile Page


Add the following code in body tag


Home

Developers Code

Login Page



For Theme-3 :



Jquery Mobile Page


Add the following code in body tag


Home

Developers Code

Login Page



For Theme-3 :



Jquery Mobile Page


Add the following code in body tag


Home

Developers Code

Login Page




That's it..Happy Coding

Tanisha Sayyad

is a Software Engineer, Blogger and Founder of Developers Code from India.His articles mainly focus on .Net (Web and Windows based applications), Mobile Technologies (Android,IPhone,BlackBerry) and SEO.

4 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Thanks for sharing...

    ReplyDelete
  3. Nice ..... Thanks for Sharing

    ReplyDelete
  4. Hi sir , I have read your post and created an app using the same source code you have given. But when i tested this app with my android phone, its only showing a home link button and two textbox and two button in the normal display . the background is white with no styles as you have given in the example

    ReplyDelete

 

Copyright @ 2013 Developers Code.

&