jqueryモバイル開発における一般的な問題の分析

jqueryモバイル開発における一般的な問題の分析_jquery

WBOY

リリース： 2016-05-16 15:18:53

オリジナル

1169 人が閲覧しました

この記事では、jquery モバイル開発における一般的な問題を例とともに分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

jquery mobile は非常に強力なので、携帯電話の種類を判断するためのメソッドをプログラムに記述する必要はありません。js を使用してさまざまなスマートフォンとの互換性を実現できます。これは、jquery モバイルプラグインが 200 K を超え、最小値が 140 K を超えているためです。

1. jquery mobile は ajax を通じてページリクエストを行います。ご存知のとおり、ajax は新しいページをフラッシュしません。つまり、アドレスバーの変更は実際の更新ではありません。ページが更新されたときにのみ 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. すべてのページが 1 つのページに収まります。このとき、同じ ID を使用しないように注意してください。そうしないと、最初の ID だけが読み取られます。 1 ページ内に複数のページがある場合、多くの問題が発生します。たとえば、ラベルからウィンドウの上部までの距離を計算すると不正確になります。

スペルが間違っています:

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

ログイン後にコピー

この方法で記述する場合の問題は、現在のページの前に多くのページがある可能性があるため、ページを更新すると、先頭の値が正しくなくなることです。

正しい書き方:

$('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 プログラミングのすべての人に役立つことを願っています。