IT Services IT Company, IT Solutions, Testing Services ... · About Ray Business Technologies Pvt....

JQuery Mobile

RAY BUSINESS TECHNOLOGIES PVT LTD

What is JQuery Mobile?

JQuery Mobile is a JavaScript framework developed by the JQuery team in order to ease up and

enhance the development of mobile web applications. This is done with the aid of integration of JQuery

, JQuery UI, HTML5 andCSS3 into the framework. This helps keep the framework and the code, clean

and organized.

Why JQuery Mobile?

JQuery Mobile is built on top of JQuery core. Hence the learning curve is very minimal for people

who are already familiar with JQuery syntax.

JQuery uses minimal scripting for laying out pages in HTML5 and CSS3.

JQuery Mobile allows to create themes with relative ease.

The code is very scalable and robust

JQuery Mobile is lightweight, uses minimal image dependencies and hence it is very fast.

JQuery Mobile is compatible with all major mobile platforms as well as all major desktop

browsers, including iPhone, iOS, Android, Blackberry, Palm, Symbian, Windows Mobile, Opera

Mobile/Mini, Firefox Mobile and all modern desktop browsers, etc.

Basic Features of JQuery Mobile:

General simplicity and flexibility :

Develop pages primarily using markup driven with minimal or no JavaScript.

Use advanced JavaScript and events.

Use a single HTML document with multiple embedded pages.

Break your application into multiple pages.

Progressive enhancement and graceful degradation .

While JQuery Mobile leverages the latest HTML5, CSS 3, and JavaScript, not all mobile devices provide

such support. JQuery Mobile philosophy is to support both high-end and less capable devices, such as

those without JavaScript support, and still provide the best possible experience.

Support for touch and other input methods .

JQuery Mobile provides support for different input methods and events: touch, mouse, and cursor focus-

based user input methods.

Accessibility .

JQuery Mobile is designed with accessibility in mind. It has support for accessible Rich Internet Applications

(WAI-ARIA) to help make web pages accessible for visitors with disabilities using assistive technologies.

Lightweight and modular .

The framework is l ightweight with an overall size (minified and gzipped for Version 1.0.1) of 24KB for the

JavaScript l ibrary, 7KB for the CSS, plus some icons.

Theming .

The framework also provides a theme system that allows you to define your own application styling. With the

new ThemeRoller application you can easily create your own themes.

Creating Basic application using JQuery Mobile:

Creating Page Footer:

Creating Button:

Creating List View:

Basic Login Window:

An Example on JQuery Mobile:

Some sample code snippet for the above screen:

----------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Restaurant Picker</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="JQuery .mobile.structure-1.0.1.css" />

<link rel="apple-touch-icon" href="images/launch_icon_57.png" />

<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />


<link rel="stylesheet" href="JQuery .mobile-1.0.1.css" />

<link rel="stylesheet" href="custom.css" />

<script src="js/JQuery -1.7.1.min.js"></script>

<script src="js/JQuery .mobile-1.0.1.min.js"></script>

</head>

<body>

<div data-role="page" id="home" data-theme="c" data-content-theme="b">

<div data-role="content">

<div id="branding">

</div>

<div class="choice_list">

<h1> What would you'd like to eat? </h1>

<ul data-role="listview" data-inset="true" >

<li><a href="choose_town.html" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some

Sushis</h3></a></li>

<li><a href="choose_town.html" data-

transition="slidedown"> <img src="pizza.jpg"/> <h3> Pizza </h3></a></li>


transition="slidedown"> <img src="kebap.jpg"/> <h3> Kebap</h3></a></li>


transition="slidedown"> <img src="burger.jpg"/> <h3> Burger</h3></a></li>

<li><a href="choose_town.html" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some

Nems </h3></a></li>


transition="slidedown"> <img src="biryani.jpg"/> <h3> Hyderabadi<br/> biryani</h3></a></li>

<li><a><h3>Desserts</h3><img src="tradi.jpg"/></a></li>

</ul>

</div>

</div></div>

</body></html>

----------------------------------------------------------------------------

Sample Code Snippet for above image:

----------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>


<title>Resto Pick</title>










</head>

<body>

<div id="choisir_ville" data-role="page" data-add-back-btn="true" data-content-theme="b">

<div data-role="header">

<h1> Resto Pick</h1>

</div>


<div class="choice_list">

<h1> In which Place do you want to eat? </h1>

<ul data-role="listview" data-inset="true" data-filter="true" >

<li><a href="choose_restaurant.html" data-transition="slidedown"> Secunderabad <span class="ui-li-

count" > 5 </span></a> </li>

<li><a href="choose_restaurant.html" data-transition="slidedown"> Dilshuknagar <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown"> Ameerpet <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown"> Kukatpally <span class="ui-li-

count" > 1</span></a> </li>

<li><a href="choose_restaurant.html" data-transition="slidedown">Madhapur <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Jublie Hills<span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Banjara Hills <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Masabtank <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Ecil <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Maredpally <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Begumpet <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Punjagutta <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Kairthabad <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Uppal <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Nagol <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">L B Nagar <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Tarnaka <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Habsiguda <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Nacharam <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Kothapet <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Malakpet <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Afzal Gunj <span class="ui-li-


<li><a href="choose_restaurant.html" data-transition="slidedown">Lakadi ka pool <span class="ui-li-


</ul>

</div>

</div>

</div>

</body>

</html>

----------------------------------------------------------------------------

Sample code snippet for above screen:

----------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>


<title>Restaurant Picker</title>










</head>

<body>

<div id="restau" data-role="page" data-add-back-btn="true">

<div data-role="header">

<h1> Resto Pick</h1>

</div>


<div class="ui-grid-a" id="restau_infos">

<div class="ui-block-a">

<h1> Paradise</h1>

<p><strong> Restaurant in Secunderabad</strong></p>

<p> On the menu: </p>

<ul>

<li> Food</li>

<li> Bakers </li>

<li> Tea </li>

</ul>

</div>

<div class="ui-block-b">

<p><img src="images/paradise.jpg" alt="jeannette photo"/></p>

<p><a href="http://paradisefoodcourt.com/" rel="external" data-role="button"> See our

website</a></p>

</div>

</div>

<hr/>

<div class="ui-grid-a" id="contact_infos">

<div class="ui-block-a">

<h2> Contact us</h2>

<p>Paradise Food Court, S D Road<br/>

http://paradisefoodcourt.com/

Secunderabad</p>

<p> Tel: +9140 6631 3721 </p>

</div>

<div class="ui-block-b">

<img src="images/map1.png" alt="plan jeanette"/>

</div>

</div>

<div id="contact_buttons">

<a href="#" data-role="button" data-icon="maps"> Find us on Google Maps </a>

<a href="tel:914066313721" data-role="button" data-icon="tel"> Call us </a>

</div>

<hr/>

<div id="notation">

<form>

<label for="select-choice-0" class="select"><h2> User rating </h2></label>

<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >

<option value="one" class="one"> Not good at all </option>

<option value="two" class="two">Average </option>

<option value="three" class="three">Pretty good </option>

<option value="four" class="four"> Excellent </option>

</select>

</form>

</div>

<script type="text/javascript">

$( '#restau' ).live( 'pageinit',function(event){

var SelectedOptionClass = $('option:selected').attr('class');

$('div.ui-select').addClass(SelectedOptionClass);

$('#note_utilisateur').live('change', function(){

$('div.ui-select').removeClass(SelectedOptionClass);

SelectedOptionClass = $('option:selected').attr('class');

$('div.ui-select').addClass(SelectedOptionClass);

});

});

</script>

</div>

</div>

</body>

</html>

----------------------------------------------------------------------------

How to optimize the speed in JQTouch:

For Iphone:

1. Performance of application is good when we use tap. Tap is the default event for safari based

applications.

2. Changes in swipe events and removal of unnecessary code.

For Android:

1. Performance of application is good when we use click event.

2. Removal of unwanted code.

About Ray Business Technologies Pvt. Ltd.

Ray Business Technologies, www.raybiztech.com, is a leading IT Services and Solutions Provider to

Fortune 500 enterprises worldwide. Raybiztech is partnered with top technology companies and is a

Member of NASSCOM. Having offices worldwide, Raybiztech has matured systems and processes,

working on diversified technologies and develops turnkey solutions.

Contact us

Ray Business Technologies Pvt Ltd

India

Ray Business Technologies Pvt. Ltd.

Plot No. 204, Block B, Kavuri Hills,

Next to IGNOU, Madhapur, Hyderabad - 500033

Tel: +91 - 40 – 2311 8011 / 22

Email: [email protected]

USA

19720 Ventura Blvd., Suite 325

Woodland Hills, CA 91364

USA Direct: 786-600-1743

Email: [email protected]

Visit us: www.raybiztech.com

mailto:[email protected]

http://www.raybiztech.com/

IT Services IT Company, IT Solutions, Testing Services ... · About Ray Business Technologies Pvt....

Documents

Transcript of IT Services IT Company, IT Solutions, Testing Services ... · About Ray Business Technologies Pvt....