Jquery. mobile common layout problems _ jquery-js tutorial

This article mainly introduces the problem of jquery. mobile's common layout. For more information, see jquery. mobile in recent projects. I only know that this framework is available and I have never played it.

Especially for event binding, compared with browsers in desktop systems, it is difficult to get started.

For example, in the background system, modules and subordinate menu items are usually displayed on the left side, which can be expanded and folded.

My problem is stuck in the accumulative evaluation. For Page Reuse, iframe is nested in the accumulative evaluation for comment display.

First Region

Students who have developed mobile WEB should know that when there are too many iframe content in the IOS browser, the scroll bar will not appear, and the content seems to have been truncated.

After all, the mobile phone screen is small. When there are too many comments, it is impossible to create a row of flip buttons like pages on a computer browser. This is really bad experience.

Currently, it is generally a rolling load. It is feasible to write a DEMO and run it on the computer first! Switch to your mobile phone. Try it on an android machine first. This is feasible.

Switching to the iphone only solves the scroll bar problem. What about rolling loading. Repeated sliding still did not respond, the heart is cold. Here we want to talk about an evil thing. It's okay in QQ and it's strange.

There is no result after this consumption, so let's look for another method. First, I want to do this on a separate page.So I encountered a second round.

The Code is as follows:

• Cumulative Evaluation

The above part corresponds to the accumulative evaluation section. After clicking it, the page style is messy, including js events not executed. F12: in addition to the html element in the body and the part in the head, the js at the bottom of the page is all gone.

Do you want to be so pitfall. Ask your colleagues if they have encountered such a problem. Just add rel = "external. The Code becomes as follows:

The Code is as follows:

• Cumulative Evaluation

Note: rel = 'external 'is similar to target = ''_ blank'', which indicates opening the object on a new page.

The third question, that is, the question mentioned in the title (the head image is the final effect)

Collapsible listview these two partners are not difficult to deal with, life and death cannot be adjusted to a better layout effect, blind drum when adding an empty collapsible actually can be.

Eventually let them together. The collapsible icon is + by default, and the right arrow of the listview item unifies the icon. By default, this is not the case for accumulative ratings.

The Code is as follows:

This issue is cleared. The complete page is as follows:

The Code is as follows: