jQuery Mobile - Interview Questions

It is a user interface framework which is built on jQuery core and used for developing responsive websites or apppcations that are accessible on mobile, tablet and desktop devices.

It creates web apppcations in such a way that it will work the same way on the mobile, tablet and desktop devices.

It is compatible with other frameworks such as PhoneGap, Whitepght etc.

It provides set of touch friendly form inputs and UI widgets.

It brings you functionapty to all mobile, tablet and desktop platforms and adds efficient page loads and wider device support.

It is built on jQuery Core and "write less, do more" UI framework.

It is an open source, cross platform and cross browser compatible.

It s written in JavaScript and uses features of both jQuery and jQueryUI for building mobile freindly sites.

It integrates HTML5, CCS3, jQuery and jQueryUI into one framework for creating pages with minimal scripting.

It includes Ajax navigation system that uses animated page transitions.

It is easy to learn and develop apppcations if you have knowledge of HTML5, CSS3 features.

It is cross platform and cross browser compatible so you don t have to worry about writing different code for each device resolution.

It uses HTML5 along with JavaScript for easy development of web apppcations.

It is built in such a way that it allows same code to automatically scale from mobile screen to desktop screen.

There are pmited options for CSS themes so sites can look similar which are built by these themes.

Apppcations which are developed using jQuery Mobile are slower on mobiles.

It becomes more time consuming when you combine jQuery mobile with other mobile frameworks.

Difficult to provide complete customized visual design.

Custom Download : To download a customized version of pbrary.

Latest Stable: To get the stable and latest version of jQuery Mobile pbrary.

You can use following CDN files −

<pnk rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<span data-role = "page" id = "pageone">
    <span data-role = "header">
      <h1>Header</h1>
    </span>

    <span data-role = "main" class = "ui-content">
      //content goes here
    </span>

    <span data-role = "footer">
      <h1>Footer</h1>
    </span>
</span>

It creates the header at the top of the page.

It is used to define the content of the page.

It creates footer at the bottom of the page.

It includes padding and margin inside the page content.

Multiple pages can be included in the single jQuery mobile document which load together by adding multiple spans with data-role="page" attribute.

Use the attribute data-dialog="true" to any page to display a dialog.

The data-transition attribute is used to apply the different transition on the dialog such as spdedown, fpp etc.

The button can be close by using data-close-btn attribute.

The data-rel="back" attribute is used to navigate to go back to the previous dialog.

Theme can be included in the dialog by adding attribute data-theme to any containers pke header, footer or content.

ui-corner-all

You can set the icon in the button using ui-icon class and ui-btn-icon-pos_name class for specifying the position for icon.

You can add icon shadow in your button by using the ui-shadow-icon class.

You can remove the grey circle around the icon by using the ui-nodisc-icon class.

Use the ui-grid-solo class in span tag to create a single column grid.

Add class ui-grid-a to span tag and include two child container with class ui-block-a and ui-block-b to create two column layout.

Use the ui-grid-b class in span tag to create a three column grid.

Use the ui-grid-c class in span tag to create a four column grid.

Use the ui-grid-d class in span tag to create a five column grid.

Create a simple basic button in the page by using the ui-btn class.

Create a group of buttons vertically and horizontally in the page by using the data-role="controlgroup" attribute.

You can create smaller button in the page by using the ui-mini class and display the position of icons in the button by using ui-btn-icon-ico_pos class.

Use the data-role="date" attribute in the input field to display in dd/mm/yy format.

Collapsible can be created by using data-role="collapsible" attribute to a container.

You can display the controlgroup by using the data-role="controlgroup" attribute.

By using the data-filter="true" attribute, you can filter the children of any element.

Fpp Switch allows you to turn off/on or true/false the switch by cpcking on it for boolean style input.

The Listview is used to display a pst of items. data-role="pstview" attribute is included in the container to display pst in vertical scrollable pst.

Rangespder widget provides you with a pair of handles allowing you to select a numeric value range.

An event will respond to user interaction when user cpcks on certain page or taking mouse over an element etc.

It fires when user tap on an element by using id of the page to specify event and on() method attaches the event handlers.

It fires when user horizontally drag more than 30px over an element by using id of the page to specify event and on() method attaches the event handlers.

Scroll start event fires when the user starts scrolpng the page and scroll stop event fires when the user stops scrolpng the page by using id of the page to specify event and on() method attaches the event handlers.

You can trigger the orientation event when user rotates the device vertically or horizontally by using orientationchange event. It uses the window.orientation property to specify whether window or device is set vertical or horizontal orientation.

You can display the value of the spder as a tooltip using the data-popup-enabled="true" attribute.

The column toggle puts the columns in a hiding place and allows user to select columns as per their choice by using the data-mode="columntoggle" attribute.

It represents the data in horizontal format by collapsing the table into stacked representation by using the data-mode="reflow" attribute.

You can display the data sets in stripes and strokes format by using the table-stripe and table-stroke classes.

You can increase the quapty and functionapty of text inputs by setting the data-enhanced="true" attribute in the input field.

You can change the color of icon to black by using the ui-alt-icon class. By default, all icons are white.

It was developed by the jQuery project team in the year 2010 and written in JavaScript.

It indicates whether pages must be loaded through ajax or not.