Summary of problems encountered in jquery.mobile common layout_jquery

A recent project used jquery.mobile to create a simple display on a mobile phone. I only knew about this framework before, but never played with it.

Especially in terms of event binding, compared with the desktop system, the browser is all kinds of uncomfortable and does not get the point.

As shown below, when working on the backend system, the left side is usually filled with modules and subordinate menu items, which can be expanded and folded.

My problem is stuck in the accumulated reviews. In order to reuse the page, an iframe is embedded in the accumulated reviews for comment display.

The first threshold

Students who have experience in mobile WEB development should know that when there is too much content in the iframe under the IOS browser, the scroll bar will not appear and the content will seem to be cut off.

After checking the information, I finally got it. After all, the mobile phone screen is small. When there are many comments, it is impossible to have a row of page turning buttons like the page on the computer browser. This experience is really bad.

Nowadays, rolling loading is generally used. Write the DEMO and run it on the computer first. It works! I changed my mobile phone and tried it with an Android phone first. It works. I think it will work.

Switching to iPhone only solved the scroll bar problem, but my scrolling loading is still there. I swiped repeatedly and still got no response, which made my heart go cold. I want to say something weird here. It is allowed in QQ and WeChat. It is really weird.

There will be no results if you continue to waste it like this, so you should find another way. The first thought was to do this on a separate page. So we encountered the second threshold.

Copy code The code is as follows:

                             

                                                                                                                                                                                                                    
• Cumulative evaluations

                                                                                                                                                                                                                                     

The above corresponds to the cumulative evaluation part. After clicking, the page style is completely messed up and the js events are not executed. Looking at the code with f12, except for the html elements in the body, the part in the head, and the js at the bottom of the page, all are gone.

Are you going to be so stupid? I asked my colleagues if they had encountered such a problem. They said that it would be fine if they added rel="external", but it didn't really work. So the code becomes as follows:

Copy code The code is as follows:

                             

                                                                                                                                                                                                                    
• Cumulative evaluation

                                                                                                                                                                                                                                     


Note: rel='external' is similar to target=''_blank'', which means opening in a new page

The third threshold is the problem mentioned in the title (the head picture is the final effect)

collapsible listview The two partners are incompatible with each other, and they can't get a better layout effect. I added an empty collapsible while tinkering and it worked. Finally got them together. The collapsible icon defaults to , and the listview item is a right arrow to unify the icons. By default, the cumulative evaluation is not as shown in the picture above.

Copy code

The code is as follows:

This problem has been cleared up. The complete page is as follows:

Copy code

The code is as follows:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   
   
   
   
   
   
   
   
   
   


   

       

           

                data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">
               

                   

医院介绍

                   

               

               

                   

套餐相关信息

                   

               

               

                   

使用须知

                   

               

               

                   

查看地图

                   

               

               

               

                                                                                                                                                                                                                         

                             

                                                                                                                                                                                                                    
• Cumulative evaluation

                                                                                                                                                                                                                                                                                                                                                                                                                                                     

The above is the entire content of this article, I hope you all like it.