jquery mobile開發常見問題分析_jquery

本文實例分析了jquery mobile開發常見問題。分享給大家參考，具體如下：

jquery mobile功能很強大，有了它，不用在程式中，寫方法去判斷，是什麼手機了，完全可以用js來實現各種智慧型手機的的相容性。也是因為功能強大，jquery mobile插件，200多K，min也有140多K。

1、jquery mobile是透過ajax來進行頁面請求，ajax大家都知道，是不涮新頁面的。也就是說網址列的變動也不是真實的涮新。這樣就有問題了，js只有刷新頁面的時候才會執行，起作用，頁面中的js程式碼刷新頁面起作用，點了頁裡面的跳轉，在轉回來就不起作用了。

錯誤代碼：

<script type="text/javascript">
$(function(){
  $('#search01').bind("click",function(){
    $('.searchPanel').show();
  });
});
</script>

正確代碼：

<script type="text/javascript">
$(function(){
  $('#search01').live("click",function(){ //jquery 1.7系列
    $('.searchPanel').show();
  });
});
</script>

如果是jquery 1.9系列的

<script type="text/javascript">
$(document).on('click', '#search01', function () { //jquery 1.9系列
  $('.searchPanel').show();
});
</script>

2、所有頁面都在一個頁裡面，這個時候，就要注意了，id不要用一樣的，不然只會讀取第一個。多頁面在一個頁裡面，會出現很多問題。例如算標籤到視窗頂部的距離，就會不準。

錯誤寫法：

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

這樣寫的問題是，目前頁面，前面很可能有很多頁面，這樣top值就不對了，你如果刷新頁面值就會正確

正確寫法：

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

.ui-page-active，表示目前啟動的頁面，這樣算出來的高度就是對的。

3、php變數賦值給JS變量，有的時候會起作用，有的時候不能。

複製代碼 代碼如下:

color = '';

對於這個問題，也沒有找到是什麼原因產生的。但是，可以用其他方法來解決。

<input type="hidden" id='color' value='<&#63;php echo $color;&#63;>'>
<script type="text/javascript">
  color = $('.ui-page-active #color').val();
</script>

希望本文所述對大家jQuery程式設計有所幫助。