JQueryMobile implements the mobile news Browser

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. jsplugin

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 the jQuery plug-in DST. jsplugin 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, you can obtain saved news categories in the $ (document). ready () function of jQuery and process the latest news under each news category one by one,

In the Code, after you select a news classification, the selected news will be connected by commas and stored in the variable storedNewsArr. For example, if you select "TopStories" and "Politics ", in the localStorage region, the string "topstories, politics" will be contained. Then we call the restore () function as shown below:

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:

The numNewsToRestore parameter indicates the number of news categories selected by the user. In the ready method of jQuery, the plug-in DST is used first. after jsplugin reads the cookie, it forms a string array of storedNewsArr, and then calls the restore method to solve the problem. Dr. Zhu Jingyu can help you: 13811078166 pass the last element in storedNewsArr (that is, the category selected by the newest) into the getNews method to obtain the news under the category, and use the restoreNews () method to process the content returned by the ajax callback, finally, call the restore () method to process the last 2nd news categories in the storedNewsArr array, and so on.

Add news category

Is an excerpt from the RSSXML file of two news under the Business classification. The parsing result of the XML is saved in the currentNews variable. Next, we will introduce the implementation of the populateSingleNews method step by step.

1) obtain the description of news classification and news Classification

2) obtain a list of news categories

Here, the p tag, that is, the id = cat_business part, is used later for animation changes;

Observe the label here. This label is used when you click the delete button on the right to use BusinessNews for event deletion;

The Thedata-split-theme attribute specifies the style deletion button used. Here we use the d style deletion button. If this parameter is not specified, the a style button is used by default.

Next, we will discuss

Delete button event processing

Process a news list event that jumps to a specific news category when a user clicks each news category.

Learn how to design an animation when a news classification title appears

Delete button event processing

Process the deletion button event

View news page

After a user clicks the title of a news category, the news list page is displayed, which lists the news under the selected news category,

Then, call showProgress to display the pending progress icon.

The getNews method is called again here, but the callback function is populateNewsItems, which will be detailed later.

Animation effect when the news title is displayed

The last part of the populateSingleNews method is that when there is the latest news under each category, the animation displays the effect of the news title and the content is displayed in

Medium,

Then, put the 1st elements in the newsArray array, that is, the latest news, in the text method of jQuery.

Label.

Then, call the refresh method of listview encapsulated in jQueryMobile, And you can refresh the content in the current directory.

Finally, call the animate method. The input parameter is the newsArray array,

Animation Effect

In the animation display method, the pArr parameter is the input News list, and the animationTarget is the area where the latest news is to be displayed. The jquery-dotimeout-plugin plug-in is used to fade in and out the latest news. The effect of this plug-in is somewhat like the setTimeout () method in Javascript. Here we define that the content in the pArr array of the News list is displayed every 2 seconds.

The animation will continue to run, but when will it end? You will know how to execute $. doTimeout (..., Lse. Do you still remember that when you delete a news category in the populateSingleNews method, there is a row $. doTimeout (categoryLi, lse? This actually means that the animation effect update is stopped before the news category is deleted.

View the preparation of the news details page

Now, after you click a news category title, you will be directed to how to implement the function of listing news lists under this category. For convenience, the following RSSXML is used as an example:

We use jQuery's find () and each () to parse XML. For each item element, we extract the detailed content of its news, that is, the content of the description sub-element, and put it in the variable txt, wrap it up and add a horizontal line to separate it.

The value is set to tmpTxt. Remember that it is the area of news content.

Add news categories that users prefer

After clicking the GetCategory button, first determine whether the user has selected the news category and raised the face in the drop-down list box, minimally invasive plastic surgery-RF firming plastic-hyaluronic acid-aibeifu-best-ivilan-collagen-Help You With Zhu Jingyu-Tel: 13811078166 if you select a news classification, call the getNews method, getNews () we have discussed the method. In fact, the selected news classification name is sent to the server through ajax to obtain the XML content returned by the server.

In the callback method of the getNews method, populateSingleNews (xml) is called. The reason is that after the news category is added, the page jumps, is to display a newly added category and its latest news, such as calling storeCurrentNews () to save the added news category to localStorage in HTML5.

Then, use the find and each methods of jQuery to obtain the names of each category in the news category list.

Finally, use the set method in DST. jsplugin to save the selected news classification list in the cookie.

Other Event code

The Event code of the home page returned from the news details page

In the first part, we once mentioned that there are buttons at the header and bottom of the news details page to return to the home page. The Code is as follows, which is very simple as calling the showCategories Code. For details, see download the attachment.

In the Code, both index.html and bridge. php run on the same server. The actual requests sent to yahoo will look like this:

Web Project Structure

Finally, we will briefly introduce the structure of the web project. For details, refer to the attachment.

Summary

This article describes how to use jQueryMobile to implement a web-based news reader, including jQueryMobile and jquery-dotimeout plug-ins, jquery. in the next tutorial, we will describe how to migrate implemented web applications to android.