This is part two of a three parts jQuery Mobile Tutorial. For introduction to the Tutorial please refer to Part I.
In Part I we developed simple static pages which form a foundation of the application we are building. In this part, we will start adding dynamic functionality.
The application will allow you to maintain a list of your favorite websites and share sites from the list with other mobile users through QR codes.
2.1 Adding a list
Let’s continue by adding a list of sites to the Home page. jQuery Mobile has a very strong list view capability. In Part III we will add ability to maintain the site list. For now let’s use a static, hardcoded list. Let’s start by replacing content area of the Home page with this:
Feel free to use any websites you like instead of the two included above.
Next we will add a page which will display QR code of a site:
At this point navigation between the Home page and QR Code page should be working. We are ready to start adding dynamic functionality.
2.2 Your first dynamic page
We will pass a site to be displayed on the QR Code page as a url parmeter. Let’s make one more change to the content of the Home page:
Parameters are encoded. In Part III we will handle encoding in the application code. For now, since we are hardcoding the site list, we are manually encoding the url parameters.
“When finding elements by their jQuery Mobile data attribute, please use the custom selector
:jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling
$("div[data-role='page']"), you should use
$("div:jqmData(role='page')"), which internally maps to
$("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.”
To find out more about dynamically injected pages please click here.
We also added a small css file to center display of the QR code.
This completes Part II of the Tutorial. You can access work in progress application on your mobile phone at http://rtekie.heroku.com/shareqr2.2.html. Screen shots are shown below:
In Part III we will add site list management capabilities and complete the application.