Use jQuery Mobile to implement the Mobile news browser (chapter 2) (1)

In the previous article, I have discussed the program structure and page layout, and briefly introduced some jQuery Mobile usage skills. In this article, I will continue to design the news browser for our web applications.

Program startup

Now let's look at the startup of the program. When the program is started, the page of the news category list is displayed to the user. To make this page not empty, we need to note which types of interest the user has selected before. To achieve this goal, we use a jQuery plug-in DST. js plugin to save the news categories selected by users in the localStorage of html5. If a user removes a category, it will also be removed from the local storage area in the browser (note that this function can be implemented only in browsers that support HTML5 standards ). When loading a page, we can use $ (document) in jQuery ). the ready () function obtains saved news categories and processes the latest news under each news category one by one. The Code is as follows:

 
 

  
  
Var COMMA = ',';
  
  
Var COOKIE_NAME = 'News ';
  
  
// NumNewsToRestore saves the number of news categories selected by the user
  
  
Var numNewsToRestore = 0;
  
  
Var storedNewsArr;
  
  
...
  
  
$ (Document). ready (function (){
  
  
ShowProgress ();
  
  
Var storedNewsTxt = $. DSt. get (COOKIE_NAME );
  
  
If (storedNewsTxt! = Null & storedNewsTxt. length> 0 ){
  
  
StoredNewsArr = storedNewsTxt. split (COMMA );
  
  
} Else {
  
  
StoredNewsArr = new Array ();
  
  
}
  
  
NumNewsToRestore = storedNewsArr. length;
  
  
Restore ();
  
  
});
 
 

In the above Code, after you select a news classification, the selected news is connected by commas (,) and stored in the storedNewsArr variable, for example, if you select "Top Stories" and "Politics", the localStorage region contains the string "topstories, politics". Then, we call the restore () function as follows:

 
 

  
  
function restore(){ 
  
  
  if(numNewsToRestore > 0){ 
  
  
     getNews(storedNewsArr[--numNewsToRestore],restoreNews); 
  
  
  }else{ 
  
  
     showCategories(); 
  
  
  } 
  
  
} 
 
 

In the restore () method, if the news category directory does not exist, we only need to display an empty news page. If a news category exists, call the getNews () method and pass the latest category as a parameter. Another parameter of the getNews () method is restoreNews. Next, let's take a look at the getNews () and restoreNews () methods:

 
 

  
  
var NEWS_URI = 'bridge.php?fwd=http://rss.news.yahoo.com/rss/'; 
  
  
... 
  
  
function getNews(varCat,handler){ 
  
  
   var varURI = NEWS_URI + varCat; 
  
  
   $.ajax({type: GET, dataType: XML, url: varURI, success: handler}); 
  
  
   return false; 
  
  
} 
  
  
... 
  
  
function restoreNews(xml){ 
  
  
   populateSingleNews(xml); 
  
  
   restore(); 
  
  
} 
 
 

The getNews () method provides the address varURI that initiates a request to ajax. The uri is in the following format: bridge. php? Fwd = http://rss.news.yahoo.com/rss/+ varCat, where varCat is the selected news directory, such as bridge. php? Fwd = http://rss.news.yahoo.com/rss/topstories. The callback function returned by ajax is restoreNews (). In restoreNews (), a custom method populateSingleNews () is called. This method will be parsed later. At last, the restore method was re-called to form a recursive call in the following order:

 
 

  
  
restore -> getNews -> restoreNews -> restore -> ...   
 
 

The numNewsToRestore parameter indicates the number of news categories selected. In the ready method of jQuery, the plug-in DST is used first. after the js plug-in reads the cookie, it forms a string array storedNewsArr, and then calls the restore method to display the last element (that is, the category selected by the latest user) in storedNewsArr) pass in the getNews method to obtain the news under this category, and use the restoreNews () method to process the content returned by the ajax callback, and finally call restore () method to process the last 2nd news categories in the storedNewsArr array, and so on.