Create sample jquery mobile page for login screen

at 10:45 PM Labels: Android, AUIDesigns, HTML5, PhoneGap

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:
Introduction to Phonegap with Hello World

Tutorial 2:

Get all the versions of Phone gap Plugins with Features

Tutorial 3:
Introduction to Jquery mobile with different login forms

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

Tutorial 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

Home
      





Developers Code
Login Page
Username:*
                    
        
Password:*

For Theme-2 :

Add the following code in body tag

Home
      





Developers Code
Login Page
Username:*
                    
        
Password:*

For Theme-3 :

Add the following code in body tag

Home
      





Developers Code
Login Page
Username:*
                    
        
Password:*

For Theme-3 :

Add the following code in body tag

Home
      





Developers Code
Login Page
Username:*
                    
        
Password:*

That's it..Happy Coding

About the Author

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.

Reach Him :

Google+

Facebook

Twitter