Monday, May 18, 2015

How to create a jQueryMobile Popup Dialog in 10 minutes

In this article we review Step by step How to create a jQueryMobile Popup Dialog in 10 minutes.
Here we make from scratch in 10 minutes a small jQuery Mobile HTML5 App with buttons , paging , and a PopUp Dialog for use on all kinds of Mobile Devices  : Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone,  ...
Here we'll build a Mobile app with two pages. When the user wants to go to the second page (a fictitious external web site) she/he will be prompted with a Popup Dialog whether is sure to abandon the site, and will be given the chose between proceeding or canceling the decision.
The complete code for this Mobile App can be get from this GitHub repository:
https://github.com/CarmelSoftware/jQueryMobile_PopUp

This small jquery Mobile App will display as the following:
How to create a jQueryMobile Popup Dialog in 10 minutes





How to create a jQueryMobile Popup Dialog in 10 minutes 



First , we need the jQuery Mobile files and the jQuery Framework, so browse to http://jquerymobile.com/ and to  the  jQuery official web site  and get the latest version of the frameworks  . Also we'll need an emulator, to see how our App will display on different Mobile devices, therefore open the Chrome Webstore and look for the FREE "Ripple" Emulator. Install it and check at the Chrome Extensions that the Emulator has full access to file URLs , and that it's enabled.
For a more detailed explanation about downloading those script frameworks and emulator, refer to this "First jQueryMobile App" Tutorial
After you get the scripts, add the following references to a new HTML5 file at the "head" element :

How to create a jQueryMobile Popup Dialog in 10 minutes    1
Next,  write a div to contain a first Page of our jQueryMobile App:

How to create a jQueryMobile Popup Dialog in 10 minutes   2

Now add a button to open the Popup Dialog as follows:

How to create a jQueryMobile Popup Dialog in 10 minutes    3

The important thing here is the data-rel="dialog" and the href reference to the Dialog page.
This is our first page, with three <div>s for a Header , Content and a Footer,  identified by the "data-role" jQueryMobile  directive, and with some style got by using the "data-theme" directive.

Now let's add a second page as follows:

How to create a jQueryMobile Popup Dialog in 10 minutes    4

We add here a button to go back to the first page:

How to create a jQueryMobile Popup Dialog in 10 minutes    5

And also some text for demonstration's sake:

How to create a jQueryMobile Popup Dialog in 10 minutes   6


Now we create the Dialog, as a page:

create a jQueryMobile Popup Dialog in 10 minutes

In the Content data-role we write the message, and add two buttons: one for cancelling with the data-rel="back" directive, and the other to go to page2:


jQueryMobile Popup Dialog in 10 minutes

Notice that the "back" rel goes back with the same transition that we apply from the previous page.

Let's see how it is displayed at the mobile emulator:
Mobile Popup Dialog in 10 minutes


Click the button to browse to the SomewhereElse page:


Popup Dialog in 10 minutes

And proceed to the next page:


Dialog in 10 minutes



That's it....Hoping you enjoyed this post ,

Happy programming with jQueryMobile.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן