Category: jquery Mobile

jQuery Mobile – Useful Resources ”; Previous Next The following resources contain additional information on jQuery Mobile. Please use them to get more in-depth knowledge on this topic. Useful Video Courses JQuery Online Training 28 Lectures 1 hours Tutorialspoint More Detail JQuery Online Course for Beginners 28 Lectures 1.5 hours Tutorialspoint More Detail Learn JavaScript & JQuery with real world Projects Best Seller 61 Lectures 9 hours Eduonix Learning Solutions More Detail jQuery Beginners to Advanced Course with 12 real Projects 18 Lectures 2 hours Sandip Bhattacharya More Detail jQuery Coding Fundamentals – Get started quickly with jQuery Best Seller 23 Lectures 1.5 hours Laurence Svekis More Detail Advanced jQuery Tips and Tricks for Developers & Designers 39 Lectures 3 hours Skillbakery More Detail Print Page Previous Next Advertisements ”;

jQuery Mobile – Events ”; Previous Next jQuery Mobile allows to create dynamic web pages. By using events, you can set up event-driven process on the elements, which are triggered by the user”s interaction such as mouse click, mouse hover on an element, key press on the keyboard, etc. Following table lists some of the events for the mobile devices, which are supported by jQuery Mobile. Sr.No. Event & Description 1 jQuery Mobile Events It responds to user interaction when the user clicks on a certain page or hovers the mouse over an element, etc. 2 jQuery Touch Events It provides touch events when the user touches the screen. 3 jQuery Scroll Events It fires the scroll events when the user scrolls up and down. 4 jQuery Orientation Event It triggers the orientation event when the user rotates the device vertically or horizontally. 5 jQuery Page Events It provides the page events when the user hides, creates, loads, or unloads the pages. Print Page Previous Next Advertisements ”;

Discuss Jquery Mobile ”; Previous Next JQuery Mobile is a user interface framework, built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses features of both jQuery and jQueryUI to provide API features for mobile web applications. This tutorial will teach you the basics of jQuery Mobile framework. We will also discuss some detailed concepts related to jQuery Mobile. Print Page Previous Next Advertisements ”;

jQuery Mobile Tutorial PDF Version Quick Guide Resources Job Search Discussion JQuery Mobile is a user interface framework, built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses features of both jQuery and jQueryUI to provide API features for mobile web applications. This tutorial will teach you the basics of jQuery Mobile framework. We will also discuss some detailed concepts related to jQuery Mobile. Audience This tutorial has been prepared for beginners to help them understand basic jQuery Mobile framework. After completing this tutorial, you will find yourself at a moderate level of expertise in jQuery Mobile framework from where you can take yourself to the next levels. Prerequisites jQuery Mobile framework is based on JavaScript programming language. Hence, if you have a basic understanding on JavaScript programming, then it will be fun to learn jQuery Mobile framework. Print Page Previous Next Advertisements ”;

jQuery Mobile – Icons ”; Previous Next jQuery Mobile provides a set of built-in icons, which can be used with buttons, listview buttons which will make the buttons more attractive. Following table lists down some of the icons used in the jQuery Mobile framework. Sr.No. Icon Area & Description 1 Icon Set It sets the icon in the button. 2 Positioning Icons It specifies the position of the icon in the button. 3 Icon-only It displays only an icon in the button. 4 Icon shadow It adds an icon shadow in your button. 5 Removing Circle It removes the grey circle around the icon. 6 Black or White Icons It changes the color of icons to black or white. 7 Combining alt and nodisc It combines the alt and nodisc classes to the icon. Print Page Previous Next Advertisements ”;

jQuery Mobile – Pages ”; Previous Next The user can interact with jQuery Mobile pages, which groups the content into logical views and page views. Page view can be animated using page transitions. Multiple pages can be created using HTML document and therefore, there is no need of requesting the content from the server. Following table demonstrates the types of pages in detail. Sr.No. Type & Description 1 Single Page A single page is created in HTML document using a standard way of writing a template. 2 Multi-Page Template Multiple pages can be included in the single HTML document, which loads together by adding multiple divs with data-role = “page”. 3 Dialogs Page Modal dialogs open content in an interactive overlay above the page. Conventions, not requirements The data-role attribute elements such as the header, footer, page, and content are used to provide the basic format and structure of a page. For single page documents, the page wrapper was required for auto-initialization is set as optional. The structural element can be excluded for a webpage with custom layout. To manage pages, the page wrapper is injected by the framework when it is not included by the markup. Prefetching pages Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. For more information click here. DOM Cache When the browser memory gets full in DOM, then it slow downs the mobile browser or might crash due to loading of multiple pages. There is a simple method to keep the DOM tidy − When a page is loaded via ajax, then it indicates to remove the page from DOM when you redirect to another page. The previous page which you have visited can be retrived from the cache when you revisit it. Instead of removing the pages, you can tell jQuery mobile to keep it in DOM by using the following line − $.mobile.page.prototype.options.domCache = true; Set the domCache option as true on the page plugin to keep all the pages in the DOM, which was visited previously. pageContainerElement.page({ domCache: true }); Print Page Previous Next Advertisements ”;

jQuery Mobile – Layouts ”; Previous Next Grid systems are used to create page layouts through a series of rows and columns that house your content. Below table demonstrates the types of grids in detail. Sr.No. Type & Description 1 Grid jQuery mobile grid system creates page layouts through a series of rows and columns. 2 Buttons in grids Collection of button in grid format in jQuery mobile. 3 Custom responsive grid The basic grid style can be easily extended to the custom responsive layout using media queries in CSS. Print Page Previous Next Advertisements ”;

jQuery Mobile – Interview Questions ”; Previous Next What is jQuery Mobile? 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. Why to use jQuery Mobile? 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. List out some features of jQuery Mobile? 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. What are advantages of jQuery Mobile? 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. What are disadvantages of jQuery Mobile? 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. What are two options to download jQuery Mobile library? Custom Download : To download a customized version of library. Latest Stable: To get the stable and latest version of jQuery Mobile library. Name the CDN files which are used with jQuery Mobile? 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> What is basic structure of jQuery Mobile page? <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> What is data-role=”header” attribute? It creates the header at the top of the page. What is data-role=”main” attribute? It is used to define the content of the page. What is data-role=”footer” attribute? It creates footer at the bottom of the page. What is data-role=”ui-content” attribute? It includes padding and margin inside the page content. How to include multiple pages in the single jQuery mobile document? Multiple pages can be included in the single jQuery mobile document which load together by adding multiple divs with data-role=”page” attribute. How to display a dialog box in the page? Use the attribute data-dialog=”true” to any page to display a dialog. How to use transition effects in the page? The data-transition attribute is used to apply the different transition on the dialog such as slidedown, flip etc. How to close button in the page? The button can be close by using data-close-btn attribute. Which attribute is used to go back to previous dialog? The data-rel=”back” attribute is used to navigate to go back to the previous dialog. How to apply theme for dialogs, header, footer or content? Theme can be included in the dialog by adding attribute data-theme to any containers like header, footer or content. Which class is used for making rounded corners? ui-corner-all How to set the icon and icon position in the button ? 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. How to set icon shadow in your button? You can add icon shadow in your button by using the ui-shadow-icon class. How to remove the grey circle around the icon? You can remove the grey circle around the icon by using the ui-nodisc-icon class. How to create single column grid? Use the ui-grid-solo class in div tag to create a single column grid. How to create two column grid and two column layout? 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. How to create three column grid? Use the ui-grid-b class in div tag to create a three column grid. How to create four column grid? Use the ui-grid-c class in div tag to create a four column grid. How to create five column grid? Use the ui-grid-d class in div tag to create a five column grid. How to create button in the page? Create a simple basic button in the page by using the ui-btn class. How to create group of buttons in the page? Create a group of buttons vertically and horizontally in the page by using the data-role=”controlgroup” attribute. How to create mini button and icon position in the page? 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. How to display date picker in the page? Use the data-role=”date” attribute in the input field to display in dd/mm/yy format. How to create collapsible widget? Collapsible can be created by using data-role=”collapsible” attribute to a container. How to create controlgroup widget? You can display the controlgroup by using the data-role=”controlgroup” attribute. How to filter the children of any element? By using the data-filter=”true” attribute, you can filter the children of any element. What is use of flip switch widget? Flip Switch allows you to turn off/on or true/false the switch by clicking on it for boolean style input. What is

jQuery Mobile – Data Attributes ”; Previous Next Button It specifies a clickable button that includes content like text or images using the class ui-btn. It is deprecated in version 1.4. Use the ui-btn attribute instead of using data-role = “button” attribute. Following table lists the button elements used with data attribute. Sr.No. Data-attribute & Description Value 1 data-corners It defines whether the button should contain rounded corners or not. true | false 2 data-icon It defines the icon of the button. Default is no icon 3 data-iconpos It defines the position of the icon. left | right | top | bottom 4 data-iconshadow It defines whether the icon of the button should contain shadow or not. true | false 5 data-inline It defines whether the button should be inline or not. true | false 6 data-mini It defines whether the button should display in smaller size or regular size. true | false 7 data-shadow It defines whether the button should contain shadow or not. true | false 8 data-theme It displays the theme color for the button. letter (a-z) Checkbox Following table lists the checkbox elements used with type = “checkbox”. Sr.No. Data-attribute & Description Value 1 data-mini It defines whether the checkbox should display in smaller size or regular size. true | false 2 data-role It stops styling of checkboxes as buttons. none 3 data-theme It displays the theme color for the checkbox. letter (a-z) Collapsible Following table lists collapsible elements used with data-role = “collapsible” attribute. Sr.No. Data-attribute & Description Value 1 data-collapsed It indicates whether the content should be closed or expanded. true | false 2 data-collapsed-cue-text It displays feedback for users with screen reader software. Default is collapsing content 3 data-collapsed-icon It defines the icon of collapsible button. Default icon is “plus” 4 data-content-theme It displays the theme color for the collapsible content. letter (a-z) 5 data-expanded-cue-text It displays feedback for users with screen reader software. Default is expanding content 6 data-expanded-icon It displays the collapsible button when you expand the content. Default icon is “minus” 7 data-iconpos It defines the position of the icon. left | right | top | bottom 8 data-inset It defines whether the collapsible button should display with rounded corners and margin or not. true | false 9 data-mini It defines whether the collapsible buttons should display in smaller size or regular size. true | false 10 data-theme It displays the theme color for the collapsible button. letter (a-z) Collapsible Set Following table lists the collapsible set elements used with the data-role = “collapsibleset” attribute. Sr.No. Data-attribute & Description Value 1 data-collapsed-icon It defines the icon of collapsible button. Default icon is “plus” 2 data-content-theme It displays the theme color for the collapsible content. letter (a-z) 3 data-expanded-icon It displays the collapsible button when you expand the content. Default icon is “minus” 4 data-iconpos It defines the position of the icon. left | right | top | bottom 5 data-inset It defines whether the collapsible button should display with rounded corners and margin or not. true | false 6 data-mini It defines whether the collapsible buttons should display in smaller size or regular size. true | false 7 data-theme It displays the theme color for the collapsible button. letter (a-z) Controlgroup Following table lists Controlgroup elements used with data-role = “controlgroup” attribute − Sr.No. Data-attribute & Description Value 1 data-exclude-invisible It defines whether to exclude invisible children in the assignment of rounded corners. true | false 2 data-mini It defines whether the group should display in smaller size or regular size. true | false 3 data-theme It displays the theme color for the controlgroup. letter (a-z) 4 data-type It indicates whether the group should display in horizontal or vertical format. horizontal | vertical Dialog Following table lists dialog elements used with data-dialog=”true” attribute. Sr.No. Data-attribute & Description Value 1 data-close-btn It defines the position of the close button. left | right | none 2 data-close-btn-text It defines the text for the close button. text 3 data-corners It defines whether dialog should display with rounded corners or not. true | false 4 data-dom-cache It indicates whether DOM cache must clear or not for individual pages. true | false 5 data-overlay-theme It defines the overlay color of the dialog page. letter (a-z) 6 data-theme It defines the theme color of the dialog page. letter (a-z) 7 data-title It defines the title of the dialog page. text Enhancement Following table lists enhancement elements used with data-enhance=”false” or data-ajax = “false” attribute. Sr.No. Data-attribute & Description Value 1 data-enhance You can style the page by setting this attribute to “true”. You cannot style the page if it is set to “false”. true | false 2 data-ajax It indicates whether pages must load from Ajax or not. true | false Fixed Toolbar Following table lists the toolbar elements used with data-position = “fixed” attribute. Sr.No. Data-attribute & Description Value 1 data-disable-page-zoom It defines whether the user is able to scale/zoom the page or not. true | false 2 data-fullscreen It defines toolbars must be positioned at the top and/or bottom. true | false 3 data-tap-toggle It indicates whether the user can toggle toolbar-visibility on taps or not. true | false 4 data-transition It shows a transition effect when you tap or click the element. slide | fade | none 5 data-update-page-padding It updates the padding of page by using resize, transition and update layout events. true | false 6 data-visible-on-page-show It defines toolbar-visibility when the parent page is shown. true | false Flip Toggle Switch Following table lists the flip toggle elements used with data-role = “flipswitch” attribute − Sr.No. Data-attribute & Description Value 1 data-mini It defines whether the switch should display in smaller size or regular size. true | false 2 data-on-text It defines the “on” text on the flip switch. Default is “on” 3 data-off-text It defines the “off” text on the flip switch. Default is “off” Footer The following table lists footer elements used with data-role=”footer” attribute

jQuery Mobile – Quick Guide ”; Previous Next jQuery Mobile – Overview JQuery Mobile 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 uses the features of both jQuery and jQuery UI to provide API features for mobile web applications. It was developed by the jQuery project team in the year 2010 and written in JavaScript. Why Use jQuery Mobile? It creates web applications 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 a set of touch-friendly form inputs and UI widgets. The progressive enhancement brings a unique functionality to all mobile, tablet, and desktop platforms and adds efficient page loads and wider device support. Features of jQuery Mobile It is built on jQuery Core and “write less, do more” UI framework. It is an open source framework, and cross-platform as well as cross-browser compatible. It is written in JavaScript and uses features of both jQuery and jQuery UI for building mobile-friendly sites. It integrates HTML5, CCS3, jQuery and jQuery UI into one framework for creating pages with minimal scripting. It includes Ajax navigation system that uses animated page transitions. Advantages of jQuery Mobile 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. You can create the custom theme using ThemeRoller without writing the line of code. It supports all HTML5 browsers. It uses HTML5 along with JavaScript for easy development of web applications. It is built in a way that allows the same code to automatically scale from the mobile screen to desktop screen. Disadvantages of jQuery Mobile 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. All the features in a device cannot be accessed by JavaScript in a browser. jQuery Mobile – Setup In this chapter, we will discuss how to install and set up jQuery Mobile. Download jQuery Mobile When you open the link jquerymobile.com/, you will see there are two options to download jQuery mobile library. Custom Download − Click this button to download a customized version of library. Latest Stable − Click this button to get the stable and latest version of jQuery mobile library. Custom Download with Download Builder Using Download Builder, you can create a custom build including only the portions of the library that you need. When you download this new customized version of jQuery Mobile, you will see the following screen. You can select the libraries according to your need and click the Build My Download button. Stable download Click the Stable button, which leads directly to a ZIP file containing the CSS and JQuery files, for the latest version of jQuery mobile library. Extract the ZIP file contents to a jQuery mobile directory. This version contains all files including all dependencies, a large collection of demos, and even the library”s unit test suite. This version is helpful to getting started. Download jQuery Library from CDNs A CDN (Content Delivery Network) is a network of servers designed to serve files to the users. If you use a CDN link in your webpage, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of jQuery mobile from the same CDN, it won”t have to be re-downloaded. You can include the following CDN files into the HTML document. //The jQuery Mobile CSS theme file (optional, if you are overriding the default theme) <link rel = “stylesheet” href = “https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”> //The jQuery core JavaScript file <script src = “https://code.jquery.com/jquery-1.11.3.min.js”></script> //The jQuery Mobile core JavaScript file <script src = “https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script> We are using the CDN versions of the library throughout this tutorial. We use AMPPS (AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples. Example Following is a simple example of jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name = “viewport” content = “width = device-width, initial-scale = 1”> <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> </head> <body> <div data-role = “page” id = “pageone”> <div data-role = “header”> <h1>Header Text</h1> </div> <div data-role = “main” class = “ui-content”> <h2>Welcome to TutorialsPoint</h2> </div> <div data-role = “footer”> <h1>Footer Text</h1> </div> </div> </body> </html> Details of the above code are − This code is specified inside the head element. <meta name = “viewport” content = “width = device-width, initial-scale = 1″> The viewport is used to specify (by the browser) to display the page zoom level and dimension. content = “width = device-width” is used to set the pixel width of the page or screen device. initial-scale = 1 sets the initial zoom level, when the page is loaded for the first time. Include the following CDNs <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> Content inside the <body> tag is a page displayed in the browser. <div data-role = “page”> … </div> data-role = “header” creates the header at the top of the page. data-role = “main” is used to define the content of the page. data-role = “footer” creates the footer at the bottom of the page. class = “ui-content” includes padding and margin inside the page content. Output Let”s carry out the following steps to see how the above code works − Save the above html code as simple_example.html file