Jquery mobile development FAQ analysis, jquerymobile

Jquery mobile development FAQ analysis, jquerymobile

This article provides examples to analyze common issues in jquery mobile development. We will share this with you for your reference. The details are as follows:

Jquery mobile is very powerful. With it, you don't need to write a method in the program to determine which mobile phone is used. You can use js to implement compatibility of various smartphones. This is also because of its powerful functions. The jquery mobile plug-in has more than 200 K and min has more than 140 K.

1. jquery mobile uses ajax for page requests. As we all know, it is not a new page. That is to say, the changes in the address bar are not actually new. In this case, the JavaScript code will be executed only when the page is refreshed. The js Code in the page refreshes the page and jumps to the page.

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>

For 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 one page. At this time, you must note that the id should not be the same. Otherwise, only the first page will be read. Multiple pages in one page may cause many problems. For example, the distance from the label to the top of the window is inaccurate.

Incorrect syntax:

$('html,body').animate({   scrollTop: $('.content').offset().top}, 100);

The problem is that there may be many pages in front of the current page, so the top value is incorrect. If you refresh the page value, it will be correct.

Correct syntax:

$('html,body').animate({   scrollTop: $('.ui-page-active .content').offset().top}, 100);

. Ui-page-active indicates the page currently activated. The height is correct.

3. php variables are assigned to JS variables, which sometimes take effect and sometimes fail.
Copy codeThe Code is as follows: color = '<? Php echo $ color?> ';
No reason is found for this problem. However, you can use other methods.

<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 jQuery programming.

Articles you may be interested in:

• Summary of problems with jquery. mobile co-Layout
• How to solve the problem that jquery mobile's touch click event will trigger multiple times
• JQuery Mobile pop-up window, pop-up layer knowledge Summary
• Introduction to loading navigation history when using the jQuery mobile class library
• JQuery mobile converts the url address and obtains the directory part of the url.
• How to Use the jQuery mobile library to detect absolute and relative URLs
• Analysis of jQuery Mobile initialization events
• Summary of various refreshing methods for jquerymobile partial Rendering