0

iPad 用のシンプルな HTML5 アプリケーションを作成しており、ページ遷移のためのシンプルな jquery ソリューションを探しています。jQueryMobileをお勧めしますが、ajax を使用して現在のページの次のページをロードし、遷移を開始するという問題があるため、ロードしようとしているページの css が乱れています 私の質問を参照してください。私もこれを試してみましたが、このプラグインは私が探していたものでしたが、これの問題は、iPadでは機能せず、移行中にページがちらつくことです。そのため、このオプションを削除しました。私が見つけたもう1つのオプションはjQTouchですが、私が知る限り、jQTouchはdivへのトランジションエフェクトでのみ機能し、ページトランジションに使用する方法がわかりません。

私が望むのは、index.html のトランジションリンクをクリック<a href="index.html">Transition</a>すると、ちらつきや index.html ページの css 妨害なしでトランジション効果が表示されることです。

トランジション中にCSSを邪魔することなくページトランジションを実現できるプラグインを誰かに勧めてもらえませんか。

4

1 に答える 1

0

うまくいけば、これがうまくいく... jQueryが必要ですが、以下の解決策がうまくいきました：

最初にbodyタグの直後にこれを追加します：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

次に、div と画像のスタイル クラスを CSS に追加します。

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最後に、この JavaScript をページに追加します (できればページの最後で、もちろん body タグを閉じる前に):

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

次に、スタイル クラスを使用して、読み込み中の画像の位置と読み込み中の div の背景色を調整します。

これで、問題なく動作します。もちろん、どこかに ajax-loader.gif が必要です。

AJAXLoad を試してみてください。素晴らしいアニメーション GIF がいくつかあります.. :)

于 2013-01-04T06:12:34.153 に答える