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..)
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
Login Page
For Theme-2 :
Add the following code in body tag
Login Page
For Theme-3 :
Add the following code in body tag
Login Page
For Theme-3 :
Add the following code in body tag
Login Page
That's it..Happy Coding
Labels: Android, AUIDesigns, HTML5, PhoneGap
4 Comments:
This comment has been removed by a blog administrator.
Thanks for sharing...
Nice ..... Thanks for Sharing
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
Post a Comment
Subscribe to Post Comments [Atom]
<< Home