jQuery Mobile - Interview Questions

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

• It creates web applications 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, Whitelight etc.

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

• It brings you functionality 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 applications 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 applications.

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

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

• Applications 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 library.

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

You can use following CDN files −

• <link 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>

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

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

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

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 divs 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 slidedown, flip 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 like 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 div tag to create a single column grid.

Add class ui-grid-a to div 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 div tag to create a three column grid.

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

Use the ui-grid-d class in div 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.

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

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

Rangeslider 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 clicks 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 scrolling the page and scroll stop event fires when the user stops scrolling 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 slider 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 quality and functionality 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.