jQueryMobile Panels For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Panels For Android and BlackBerry

In this post we create in 10 minutes a jQuery Mobile App using sliding Panels,  for use on all Mobiles  : Nexus , BlackBerry, Nokia, iPad, iPhone,  Acer ,  ...
The additional content displayed in the Panel will be shown in Reveal mode, which together with the Push and the Overlay modes, are the ways to the Panel to be displayed.
This App will look like this:

How to create jQueryMobile Panels For Android and BlackBerry

We'll need the  jQuery and jQueryMobile Frameworks . Therefore , go to  http://jquerymobile.com/ and to the  jQuery web site , and retrieve the latest versions of jQuery and jQueryMobile via Content Delivery Network (CDN)  . Because we  will also use a Mobile Emulator, please learn this 5 minutes tutorial about Ripple Emulator setup.

After you got the URLs of the frameworks, add them to the Head element of the HTML5 file, as follows :

This is the most important part of this tutorial. Here you add your Panel to the App. The Panel must be add before or after the Header/Footer parts of the Page.
In the Panel, you define a data-role="panel", and a data-display="reveal" , which you can change to "Overlay" or to "Push" options.
Then you add a data-swipe-close="true", in order to allow closing the Panel by swiping the page. Elsewhere, the Panel will be closed by clicking the "Close" Button, by pressing the "Esc" keyboard key, or by clicking anywhere outside the Panel:

Then, add a data-role=header including a NavBar , by using the data-role="page" and also the data-role="header" , together with a "fixed" attribute to stack it as the user scrolls the screen :

Now add a "main" div including text and a button which will open the Panel, and will be coded this way:

Finally, we code the markup for the Footer of the page , including a Navbar,  as follows:

We customized this Mobile App by adding the following styles inside a CSS3 file in the Styles folder:

And this is how the jQuery Mobile Panel looks like:

Hoping this post was helpful for you...

      Carmel Schvartzman

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

jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

In this post we build in 20 minutes a jQuery Mobile App , with a toggle Table , where you can hide or display its columns,  for use on all kind of Mobile devices : iPad, iPhone, Nexus , BlackBerry, Nokia,  Acer ,
The data displayed on this table will be loaded in Json format via Ajax.
This Mobile App will look like this:

How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

For this post of jQuery Mobile , we'll need the  jQuery and jQueryMobile Frameworks, so  enter http://jquerymobile.com/ and jQuery web site , and get the latest versions of the files via CDN  . We  will also use a Mobile Emulator, so please refer to this short tutorial on Ripple Emulator setup.

Also, this basic   "First jQueryMobile App" Tutorial explains the installation of both the frameworks and the emulator in detail.
After you got the references, add them to the Head of the HTML5 file:

First, we'll add a Header with a NavBar , using the data-role="page" and the data-role="header" with a "fixed" attribute to fix it as the user scrolls the screen :

Now we create a "main" div with our table: we use the data-role=table and the data-mode=columntoggle, which allows the user to display/hide the columns. If you don't use "columntoggle", the table will be displayed as "Reflow" mode, meaning that ALL columns are displayed, and in small screens, all data is grouped in chunks corresponding to each row.

Then you define a data-priority directive from 1 (most important field) to 6 (less important column).

If you do not define a data-priority for a column, it will be always displayed:

We also define a button for calling the function that loads the table data.

Finally, we write the markup for a Footer with a Navbar as follows:

The script which loads the data includes a call to the jQuery  $.ajax method, to the URL where a text file contains JSON data for the table.

The HTTP request uses a GET method and, this is really important, we tell the server that we are expecting data in JSON format, meaning that the request's "Accept" header will include "application / json".

We add two callback functions : error and success.

In case of success, we perform a $.each() loop over the JSON data, which is built on key/value pairs, where the Key is the "id" field, and the Value is the Customer object.

For each customer, we append to the Table a Row with a Cell (<td>) per column:

Very important too, we REFRESH the Table after adding the Row, so that the Toggle functionality will include the appended rows.

We customized this Mobile using the following style in a CSS3 file:

And this is how the jQuery Mobile Toggle Table looks like:

Hoping this post was helpful for you...

Happy programming.....

      by Carmel Schvartzman

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

jQueryMobile using Ajax to load Json data to a Table

Here we review Step by step jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry

In this article we create in 20 minutes a jQuery Mobile App to load Json data to a toggle Table , where you can hide or display its columns,  via Ajax calls . This App is for use on all kind of Mobile devices : Nexus , iPad, iPhone, BlackBerry, Nokia,  Acer ,  ...
The data will be loaded in Json format via Ajax, in order to be displayed on this table .
This jQuery Mobile App looks like this:

jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry

For this article on jQuery Mobile , we'll be using the  jQuery and jQueryMobile Frameworks, so  browse to http://jquerymobile.com/ and jQuery , and obtain the latest versions of the frameworks via CDN  . If you want to use a Mobile Emulator, please refer to the following short tutorial on the Ripple Emulator.

After you got the files , add them to the Head of the HTML5 file:

First, add a Header with a NavBar , by making use of the data-role="page" and the data-role="header" , adding also a "fixed" attribute to fix the header in its place when the user scrolls the screen :

Create a "main" div element containing our table.  Use the data-role=table and the data-mode=columntoggle directives, which allow to display/hide the columns. However , if you don't write "columntoggle", the table will be shown in "Reflow" mode, then ALL columns will be displayed, and all the data will be grouped in chunks per row.

Inside the table,  define to each field a data-priority directive from 1 (most priority field) to 6 (less important column).

Notice that if you do not set a data-priority for a field, it will always be displayed:

We also write a button to call the function that brings the table data.

Finally, we code the markup for making a Footer with a Navbar :

The javascript which brings the data includes using the jQuery  $.ajax function, sending requests to the URL where is stored a file containing JSON data .

This HTTP GET request  tells the server that the data is expected in JSON format, so that the request's "Accept" header will include "application / json".

In case of successful performance, we do an $.each() loop on the received JSON data in the response, which includes key/value pairs, where the Key is the "id"  , and the Value is the Customer  JSON object.

Then, for each customer, we add to the tbody of the Table a Row with a Cell per column:

Is imperative that you REFRESH the Table after adding the Rows, therefore the table's Toggle functionality will work on the new rows.

We added also some style to this Mobile using the following  CSS3 file:

All the code can be downloaded from the following GitHub repository:

https://github.com/CarmelSoftware/jQueryMobile_Ajax_Json_Table

This is how the jQuery Mobile Toggle Table looks :

We hope that this article was helpful for you...

Happy programming.....

      by Carmel Schvartzman

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

How to create a jQuery Mobile Form

Here we describe Step by step How to create a jQueryMobile Form For Android and BlackBerry

In this article we build in 20 minutes a complete jQuery Mobile Form , with input types text, date, email, search, text area, select, range, Toggle Switch, check boxes, and radio buttons. This Form is for use on all kind of Mobile  : iPad, iPhone,BlackBerry, Nexus , Acer , Nokia,  etc...
This Mobile App will look like this:

And this is the manner it is displayed on an emulator:

How to create a jQuery Mobile Form 

For this post we will use the jQuery Mobile and the  jQuery Frameworks, so enter http://jquerymobile.com/ and also jQuery official web site , and copy the latest versions of the files , preferably on CDN  . Because we  will also be using a Mobile Emulator,   please refer to this short tutorial on installing the Ripple Emulator.

There is also a basic   "First jQueryMobile App" Tutorial for a more in depth explanation on the setup of the frameworks and emulator.

After you got  the frameworks URLs, refer to them at the Head of the HTML5 file:

Add a data-role="page" for setting our web Page, and a data-role="header" fixed, with a NavBar :

Now we create a data-role="page" with class ui-content to hold our Form:

First we added several input fields with its labels, of many input types, like search, text, email,date, and text area.

Then we create a dropdownlist as follows:

Native menu false tells todisplay exactly the same select list on all mobile devices.

We add an input type Range, and a special checkbox with data-role flipswitch:

Then we add checkboxes and radio buttons as follows:

Finally, we add the Submit and Reset buttons:

The Submit here will open a PopUp Dialog, instead of submitting the Form.

You can replace it with this code:

<input type="submit" data-inline="true" value="Submit">

Now we add a Footer this way:

And the Dialog is this:

Let's open the Ripple Emulator to see our Form and to check it:

We customized this App by adding some style in a CSS3 file as follows:

That's it....

Hoping this article was helpful for You...

Happy programming.....

      by Carmel Schvartzman

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