jquery Mobile Development common problems analysis _jquery

The example of this article analyzes the common problems of jquery mobile development. Share to everyone for your reference, specific as follows:

jquery Mobile is very powerful, with it, not in the program, write methods to judge, what is the phone, you can use JS to achieve a variety of smartphone compatibility. Also because of powerful, jquery mobile plug-ins, more than 200 k,min also has more than 140 K.

1, jquery Mobile is through Ajax to page requests, Ajax you know, is not to rinse the new page. That is to say, the change of address bar is not real rinse new. So there is a problem, JS only refresh the page when it will execute, the role of the page in the JS Code refresh page function, point to the page inside the jump, in turn back will not work.

Error code:

<script type= "Text/javascript" >
$ (function () {
  $ (' #search01 '). Bind ("click", Function () {
    $ ('. Searchpanel '). Show ();
  }
); </script>

Correct code:

<script type= "Text/javascript" >
$ (function () {
  $ (' #search01 '). Live ("Click", Function () {//jquery 1.7 Series
    $ ('. Searchpanel '). Show ();
  });
</script>

If it's the jquery 1.9 series,

<script type= "Text/javascript" >
$ [Document). On (' Click ', ' #search01 ', function () {//jquery 1.9 series
  $ ('. Searchpanel '). Show ();
};
</script>

2, all pages are in a page, this time, we should pay attention to, ID not use the same, or will only read the first. Multiple pages in a page, there will be many problems. For example, the distance between the label and the top of the window is not allowed.

Wrong wording:

$ (' html,body '). Animate ({
   scrolltop: $ ('. Content '). Offset (). Top
}, 100);

The problem with this is that the current page is likely to have many pages in front of it, so the top value is wrong, you will be correct if you refresh the page value

Correct wording:

$ (' html,body '). Animate ({
   scrolltop: $ ('. ui-page-active. Content '). Offset (). Top
}, 100);

. Ui-page-active, which represents the currently active page, so the height of the calculation is right.

3, PHP variable assignment to JS variable, sometimes will work, sometimes not.

Copy Code code as follows:

color = ' <?php echo $color?> ';

There is no reason for this problem to be found. However, it can be resolved in other ways.

<input type= "hidden" id= ' color ' value= ' <?php echo $color;? > ' >
<script type= "Text/javascript" >
  color = $ ('. Ui-page-active #color '). Val ();
</script>

I hope this article will help you with the jquery program design.