jQuery Mobile - the first App Q-News (Page / Menu / Panel / Listview)

Learn by Doing! In this case study, jQM is used to programming a News Reader App that get news categories and articles from Web APIs.

Each page is partitioned into three parts: header, main (content) and footer (tools). Therefore, find similar examples from jQuery Mobile Examples.
In the first (default) page, just copy codes from A basic mobile web page. Paste into the index.html file. Then, modify some codes within "header", "main" and "footer".

A basic mobile web page

Modified source code: <div data-role="page" data-theme="a" data-title="Q-News">

Save as index.html

Run with Chrome browser.

Press F12 to emulate the page in iPhone 5 device.

I want to put two buttons "Channels" and "Settings" on header's left and right-side, respectively. Therefore, I found following references to see how to use "button" with attributes: "shadow", "icon", "corner", etc.

• Add a button to the left side in the header 
• jQuery Mobile Icons Reference

Use "button" sample code to build my left and right links

Mobile Web page simulated in iPhone 5

<h1 style="font-size: 0.8em">

Fit the height of header (<h1>) with the height of button

When "Menu" was clicked, the control panel should be faded into the page. Therefore, following sample codes were found and modified.

• Change the panel display 

set id of <div> blocks and link with <a herf="#...">

To clearly see the result of fading in panel, change the emulator to iPad for larger screen

However, the menu data (channels of news) should be obtained from API that returns JSON data. And new channels are presented as a listview. Therefore, I found following references, revised some codes, and wrote a JS function to show the final result.

• jQ Events: find supported events of jQuery, I apply JS function to this event pagecontainerbeforeload.
• List views with rounded corners 

Get JSON data from API and show in a ListView of Panel

Write all used JS functions in the "js" folder. The menu_list() is written in qnews.js.

Clear contents within the control panel "menuPanel" and replace with jQM ListView UI component. <li> contents within <ul> is replaced with the comment to enhance the readability of the HTML code. I use HTML comment <!-- js fun to get JSON data --> to denote that JS function will get JSON data and append <li> item string to the listview <ul>. The jQ event "pagecontainerbeforeload" will call JS function menu_list() to append HTML codes.
$(document).on("pagecontainerbeforeload", menu_list());

Put data in <ul data-role="listview">

jQuery getJSON() is an Ajax method to get json data through Web API (via http:// or https://). Then the callback function is defined to get each JSON item as "o" that is passed into another callback function for appending <li> listview item.

JS function: menu_list

function menu_list() {
  $.getJSON("qnews.json", function(jstr) {
    $.each(jstr.item, function(i, o) { // index, object
      $("#menulistview").append("<li><a href=\"#\" class=\"ui-btn ui-btn-icon-right ui-icon-carat-r\">" + o.ename + "</a></li>");
    });
  });
}


qnews.json should be replaced with Web API.

Next: Add content and set footer at the bottom.